<template>
  <div class="app-container">
    <!-- 头部 -->
    <div class="dataScreen-head">
      <div class="dataScreen-title">
        <p id="robotxj"></p>
      </div>
    </div>
    <!-- 内容 -->
    <div class="dataScreen-contner">
      <!-- 左边抽屉按钮 -->
      <el-button @click="drawer = true" round type="primary" size="mini" style="
          color: #0b73c5;
          z-index: 1000;
          position: fixed;
          left: 2.5%;
          top: 44%;
          border: none;
          background: none !important;
        ">
        <i class="el-icon-d-arrow-right"></i>
      </el-button>
      <!-- 右边抽屉按钮 -->
      <el-button @click="dialog = true" round type="primary" size="mini" style="
          color: #0b73c5;
          z-index: 1000;
          position: fixed;
          right: -1%;
          top: 45%;
          border: none;
          background: none !important;
        ">
        <i class="el-icon-d-arrow-left"></i>
      </el-button>
      <!-- 左边 -->
      <div class="dataScreen-left">
        <!-- 机器人列表 -->
        <div class="dataScreen-robot">
          <!-- 标题 -->
          <div class="dataScreen-rotitle">
            <p>机器人列表</p>
          </div>
          <!-- 列表 -->
          <div class="dataScreen-rolist">
            <!-- 表头 -->
            <el-table align="le" @row-click="selectrobot" :data="robots" height="100%"
              :class="[isDologin ? 'scrollbarShow' : 'commonScrollbarTable']"
              :header-cell-style="{ background: '#132743', opacity: '0.4', color: '#FFFFFF', fontSize: '12px', 'text-align': 'left' }"
              :row-style="{ height: '36px', background: 'tranaparent', fontSize: '12px' }"
              :cell-style="{ padding: '0px', }"
              style="font-size: 12px; font-weight: bold; color:#a1c3dc; border-bottom: none;">
              <el-table-column label="编号">
                <template slot-scope="scope">
                  <div class="list-img" style="fontSize:'12px';display:flex;align-items: center;">
                    <img src="../../components/images/001.png" width="40px" height="30px" alt="" />
                    <div
                      style="background-image:-webkit-linear-gradient(bottom,#63a5dc,#09d1e3); -webkit-background-clip:text; -webkit-text-fill-color:transparent; font-size: 12px; font-weight: bold;margin-left:-30px ">
                      00{{ scope.$index + 1 }}
                    </div>
                    <P style="font-size:12px; font-weight: bold; display: inline-block;margin-left:10px;">
                      {{ scope.row.robot_num }}
                    </P>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="robot_name" label="名称">
              </el-table-column>
              <el-table-column label="状态" width="50px"
                style="display:flex;align-items: center;justify-content: center;">
                <template slot-scope="scope">
                  <img src="../../components/images/run.png" width="20px" height="20px" alt=""
                    v-if="scope.row.robot_state == 1">
                  <img src="../../components/images/wrong.png" width="20px" height="20px" alt="" v-else>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <!-- 电器参数 -->
        <div class="dataScreen-electrical">
          <!-- 标题 -->
          <div class="dataScreen-eltitle">
            <p>电气参数</p>
            <el-select v-model="selectedOption[0]" :placeholder="selectedOption[0]" @change="getOptionPLC">
              <el-option v-for="item in plcList" :key="item.robot_config_id + '_' + item.plc_num" :label="item.plc_name + ' ' + (item.plc_state == 1 ? '在线' : '离线')
                " :value="item.robot_config_id + '_' + item.plc_num"></el-option>
            </el-select>
          </div>
          <!-- 参数列表 -->
          <div class="dataScreen-ellist" style="overflow: auto">
            <div class="item" v-hasPermi="['robot:ddmkdw:view']">
              <p style="color: #a1c3dc">1#电动门开到位</p>
              <p style="color: #9f702c" v-if="ddmkdw == '未到位'">
                {{ ddmkdw }}
              </p>
              <p style="color: #a2b5d7" v-else-if="ddmkdw == '无'">
                {{ ddmkdw }}
              </p>
              <p style="color: #2da14e" v-else>{{ ddmkdw }}</p>
            </div>
            <div class="item" v-hasPermi="['robot:ddmgdw:view']">
              <p style="color: #a1c3dc">1#电动门关到位</p>
              <p style="color: #9f702c" v-if="ddmgdw == '未到位'">
                {{ ddmgdw }}
              </p>
              <p style="color: #a2b5d7" v-else-if="ddmgdw == '无'">
                {{ ddmgdw }}
              </p>
              <p style="color: #2da14e" v-else>{{ ddmgdw }}</p>
            </div>
            <div class="item" v-hasPermi="['robot:ddmkdw:view']">
              <p style="color: #a1c3dc">2#电动门开到位</p>
              <p style="color: #9f702c" v-if="ddmkdw2 == '未到位'">
                {{ ddmkdw2 }}
              </p>
              <p style="color: #a2b5d7" v-else-if="ddmkdw2 == '无'">
                {{ ddmkdw2 }}
              </p>
              <p style="color: #2da14e" v-else>{{ ddmkdw2 }}</p>
            </div>
            <div class="item" v-hasPermi="['robot:ddmgdw:view']">
              <p style="color: #a1c3dc">2#电动门关到位</p>
              <p style="color: #9f702c" v-if="ddmgdw2 == '未到位'">
                {{ ddmgdw2 }}
              </p>
              <p style="color: #a2b5d7" v-else-if="ddmgdw2 == '无'">
                {{ ddmgdw2 }}
              </p>
              <p style="color: #2da14e" v-else>{{ ddmgdw2 }}</p>
            </div>
            <div class="item" v-hasPermi="['robot:cdzdw2:view']">
              <p style="color: #a1c3dc">1#充电桩机器人到位信号</p>
              <p style="color: #a2b5d7">{{ cdzdwxh1 }}</p>
            </div>
            <div class="item" v-hasPermi="['robot:cdzdw1:view']">
              <p style="color: #a1c3dc">2#充电桩机器人到位信号</p>
              <p style="color: #a2b5d7">{{ cdzdwxh2 }}</p>
            </div>
          </div>
        </div>
        <!-- 设备运行参数 -->
        <div class="dataScreen-equipment">
          <!-- 标题 -->
          <div class="dataScreen-eqtitle">
            <p>设备运行参数</p>
          </div>
          <!-- 参数列表 -->
          <div class="dataScreen-ellist" style="overflow: auto">
            <div class="item">
              <p style="color: #a1c3dc">电机转速(r/min)</p>
              <p style="color: #a2b5d7">{{ djzs }}</p>
            </div>
            <div class="item">
              <p style="color: #a1c3dc">机器人方向</p>
              <p style="color: #9a4814" v-if="jqrfx == '后退'">{{ jqrfx }}</p>
              <p style="color: #a2b5d7" v-else-if="jqrfx == '无'">
                {{ jqrfx }}
              </p>
              <p style="color: #2da14e" v-else>{{ jqrfx }}</p>
            </div>
            <div class="item">
              <p style="color: #a1c3dc">机器人模式</p>
              <p style="color: #a2b5d7">{{ jqrms }}</p>
            </div>
            <div class="item">
              <p style="color: #a1c3dc">电池状态</p>
              <p style="color: #96e81a" v-if="dczt == '充电'">{{ dczt }}</p>
              <p style="color: #a2b5d7" v-else-if="dczt == '无'">{{ dczt }}</p>
              <p style="color: #9f702c" v-else>{{ dczt }}</p>
            </div>
            <div class="item">
              <p style="color: #a1c3dc">电机温度(℃)</p>
              <p style="color: #ee1c22" v-if="djwd > 90">{{ djwd }}</p>
              <p style="color: #9eee25" v-else-if="djwd > 60">{{ djwd }}</p>
              <p style="color: #46cc51" v-else-if="djwd > 40">{{ djwd }}</p>
              <p style="color: #29ab33" v-else-if="djwd > 30">{{ djwd }}</p>
              <p style="color: #30a96a" v-else-if="djwd > 20">{{ djwd }}</p>
              <p style="color: #a2b5d7" v-else-if="djwd == '无'">{{ djwd }}</p>
              <p style="color: #0b853c" v-else>{{ djwd }}</p>
            </div>
            <div class="item">
              <p style="color: #a1c3dc">1#电机</p>
              <p style="color: #a2b5d7">{{ dj1 }}</p>
            </div>
            <div class="item">
              <p style="color: #a1c3dc">2#电机</p>
              <p style="color: #a2b5d7">{{ dj2 }}</p>
            </div>
            <div class="item">
              <p style="color: #a1c3dc">1#摄像头</p>
              <p style="color: #a2b5d7">{{ sxt1 }}</p>
            </div>
            <div class="item">
              <p style="color: #a1c3dc">2#摄像头</p>
              <p style="color: #a2b5d7">{{ sxt2 }}</p>
            </div>
            <div class="item">
              <p style="color: #a1c3dc">轨道长度</p>
              <p style="color: #a2b5d7">{{ gdzcd }}</p>
            </div>
            <div class="item">
              <p style="color: #a1c3dc">收钩</p>
              <p style="color: #a2b5d7">{{ sg }}</p>
            </div>
            <div class="item">
              <p style="color: #a1c3dc">放钩</p>
              <p style="color: #a2b5d7">{{ fg }}</p>
            </div>
          </div>
        </div>
      </div>
      <!-- 中间 -->
      <div class="dataScreen-center">
        <!-- 监控视频区 -->
        <div class="dataScreen-video">
          <!-- 摄像头图标 -->
          <div class="dataScreen-videoimg">
            <img src="../../components/images/robot.png" alt="" />
          </div>
          <!-- 监控画面 -->
          <!-- 大华摄像头 -->
          <div class="dataScreen-videoBox" v-show="this.camera_type == 0">
            <div class="dataScreen-videoIcon">
              <video v-show="videoShowQ" id="DHQvideo" class="video-js" style="width: 100%; height: 99%"
                controls></video>
            </div>
            <div class="dataScreen-videoIcon" style="border-left: 0px">
              <video v-show="videoShowH" id="DHHvideo" class="video-js" style="width: 100%; height: 99%"
                controls></video>
            </div>
          </div>
          <!-- 吊舱摄像头 -->
          <div class="dataScreen-videoBox" v-show="this.camera_type == 2">
            <div class="dataScreen-videoIcon">
              <video v-show="videoShowQ" id="DCQvideo" class="video-js" style="width: 100%; height: 99%" controls
                autoplay autobuffer muted preload="auto" disablePictureInPicture="true"
                controlslist="nodownload"></video>
            </div>
            <div class="dataScreen-videoIcon" style="border-left: 0px">
              <video v-show="videoShowH" id="DCHvideo" class="video-js" style="width: 100%; height: 99%" controls
                autoplay autobuffer muted preload="auto" disablePictureInPicture="true"
                controlslist="nodownload"></video>
            </div>
          </div>
          <!-- 海康摄像头 -->
          <div class="dataScreen-videoBox" v-show="this.camera_type == 1">
            <div class="dataScreen-videoIcon">
              <video id="HKQvideo" class="video-js" style="width: 100%; height: 99%" controls autoplay autobuffer muted
                preload="auto" disablePictureInPicture="true" controlslist="nodownload"></video>
            </div>
            <div class="dataScreen-videoIcon" style=""></div>
          </div>
        </div>
        <!-- 轨道部分 -->
        <div class="dataScreen-track">
          <!-- 图标部分 -->
          <div class="dataScreen-trackTop">
            <div class="dataScreen-trackIcon1">
              <img src="../../components/images/contorll.png" alt="" />
              <p>巡检点</p>
            </div>
            <div class="dataScreen-trackIcon2">
              <img src="../../components/images/contorl.png" alt="" />
              <p>机器人</p>
            </div>
            <div class="dataScreen-trackIcon3">
              <div style="
                  width: 24px;
                  height: 8px;
                  background: linear-gradient(-85deg, #3f9fdc, #7af9fd);
                "></div>
              <p>
                位移 <font style="color: #5dcbff"> {{ sswy }}</font> m
              </p>
            </div>
            <div class="dataScreen-trackIcon4">
              <div style="
                  width: 24px;
                  height: 8px;
                  background: linear-gradient(-85deg, #365084, #7a80fd);
                "></div>
              <p>
                电压
                <font style="color: #138047" v-if="dcdy > 70">{{ dcdy }}</font>
                <font style="color: #0e8618" v-else-if="dcdy > 50">{{
                  dcdy
                  }}</font>
                <font style="color: #29ab33" v-else-if="dcdy > 40">{{
                  dcdy
                  }}</font>
                <font style="color: #46cc51" v-else-if="dcdy > 30">{{
                  dcdy
                  }}</font>
                <font style="color: #9eee25" v-else-if="dcdy > 20">{{
                  dcdy
                  }}</font>
                <font style="color: #a5f1a6" v-else-if="dcdy > 15">{{
                  dcdy
                  }}</font>
                <font style="color: #5dcbff" v-else-if="dcdy == '无'">{{
                  dcdy
                  }}</font>
                <font style="color: #e19532" v-else>{{ dcdy }}</font>
                v
              </p>
            </div>
            <div class="dataScreen-trackIcon5">
              <div style="
                  width: 24px;
                  height: 8px;
                  background: linear-gradient(-85deg, #268c76, #1d83a7);
                "></div>
              <p>
                电量
                <font style="color: #30a96a" v-if="dcdl > 80">{{ dcdl }}</font>
                <font style="color: #46cc51" v-else-if="dcdl > 70">{{
                  dcdl
                  }}</font>
                <font style="color: #9eee25" v-else-if="dcdl > 60">{{
                  dcdl
                  }}</font>
                <font style="color: #9eee25" v-else-if="dcdl > 50">{{
                  dcdl
                  }}</font>
                <font style="color: #a5f1a6" v-else-if="dcdl > 30">{{
                  dcdl
                  }}</font>
                <font style="color: #e19532" v-else-if="dcdl > 20">{{
                  dcdl
                  }}</font>
                <font style="color: #5dcbff" v-else-if="dcdl == '无'">{{
                  dcdl
                  }}</font>
                <font style="color: #de5c23" v-else>{{ dcdl }}</font>
                %
              </p>
            </div>
            <div class="dataScreen-trackIcon6">
              <div style="
                  width: 24px;
                  height: 8px;
                  background: linear-gradient(
                    -85deg,
                    rgb(65 142 226),
                    rgb(29 84 167)
                  );
                "></div>
              <p>
                运行灯
                <font style="color: #bb5d10" v-if="yxd == '关闭'">{{
                  yxd
                  }}</font>
                <font style="color: #5dcbff" v-else-if="yxd == '无'">{{
                  yxd
                  }}</font>
                <font style="color: #17a956" v-else>{{ yxd }}</font>
              </p>
            </div>
          </div>
          <!-- 轨道点 -->
          <div class="dataScreen-trackBtom1" v-show="typeof this.result == 'undefined' || this.result == null">
            暂无电子地图
          </div>
          <div class="dataScreen-trackBtom" ref="chinaMapChart"
            v-show="typeof this.result !== 'undefined' && this.result !== null"></div>
        </div>
      </div>
      <!-- 右边 -->
      <div class="dataScreen-right">
        <!-- 图标 -->
        <div class="dataScreen-rightIcon">
          <!-- 机器人 -->
          <div class="dataScreen-rightIcon1">
            <img id="jqrimgid" src="../../components/images/jiqiren2.png" alt="" style="display: block" />
            <p class="pname">机器人</p>
            <p class="Online" v-if="robotState == 1">在线</p>
            <p class="Offline" v-else-if="robotState == 0">离线</p>
          </div>
          <!-- PLC -->
          <div class="dataScreen-rightIcon1">
            <img id="plcimgid" src="../../components/images/plc2.png" alt="" style="display: block" />
            <p class="pname">PLC</p>
            <p class="Online">
              在线&nbsp;&nbsp;&nbsp;&nbsp;{{ onlinePlc.length }}
            </p>
          </div>
          <!-- 摄像头 -->
          <div class="dataScreen-rightIcon1">
            <img id="plcimgid" src="../../components/images/sxt.png" alt="" style="display: block" />
            <p class="pname">摄像头</p>
            <p class="Offline">
              <font style="color: #00ff3c" v-if="Qonline == 0">前</font>
              <font style="color: #b9bab9" v-if="Qonline != 0">前</font>
              <font style="color: #00ff3c" v-if="Honline == 0 && Qonline == 0">/</font>
              <font style="color: #b9bab9" v-if="Honline != 0 && Qonline != 0">/</font>
              <font style="color: #00ff3c" v-if="Honline == 0">后</font>
              <font style="color: #b9bab9" v-if="Honline != 0">后</font>
              <font style="color: #00ff3c" v-if="Honline == 0 && Qonline == 0">在线</font>
              <font style="color: #b9bab9" v-if="Honline != 0 && Qonline != 0">离线</font>
            </p>
          </div>
          <!-- 告警 -->
          <div class="dataScreen-rightIcon1">
            <img id="bjimgid" src="../../components/images/gaojin2.png" alt="" style="display: block" />
            <p class="pname">告警</p>
            <p class="p3">{{ alarms.length == 1 ? 0 : alarms.length }}</p>
          </div>
        </div>
        <!-- 告警列表 -->
        <div class="alarmsList">
          <div v-if="alarms.length == 0" class="sound">
            <img src="../../components/images/spk.png" alt="" />
            <div class="text-container">
              <p class="alarmP1" key="no-alarms">暂无告警信息</p>
            </div>
          </div>
          <div class="alarms-list" v-for="alarm in alarms" :key="alarm.id" style="width: 100%" v-else>
            <div style="display: flex" @click="alarmHandle(alarm)">
              <img src="../../components/images/spk2.png" alt="" />
              <div class="alarmP2">
                <router-link :to="'/robot/alarm/alarmData'" class="alarmP2">
                  <p>
                    {{ alarm.alarminfo }} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    {{ alarm.alarmtime }}
                  </p>
                </router-link>
              </div>
            </div>
          </div>
        </div>
        <!-- 巡检列表 -->
        <div class="dataScreen-inspection">
          <!-- 标题 -->
          <div class="dataScreen-intitle">
            <router-link :to="'/robot/xjgls/patroltaskhis'">
              <p>巡检列表</p>
            </router-link>
          </div>
          <!-- 列表 -->
          <div class="dataScreen-inlist">
            <!-- 表头 -->
            <el-table :data="patrols" ref="table" height="90%"
              :class="[isDologin ? 'scrollbarShow' : 'commonScrollbarTable']" :header-cell-style="{
                background: '#132743',
                opacity: '0.4',
                color: '#FFFFFF',
                fontSize: '12px',
                'text-align': 'center',
              }" :row-style="{ height: '33px', fontSize: '12px' }"
              :cell-style="{ margin: '2px', 'text-align': 'center' }" style="
                font-size: 12px;
                font-weight: bold;
                color: #a1c3dc;
                border-bottom: none;
              ">
              <el-table-column prop="position_num" label="巡检点" width="60px">
              </el-table-column>
              <el-table-column prop="creater_time_str" label="时间" width="90px">
              </el-table-column>
              <el-table-column prop="vals" label="结果" width="70px">
              </el-table-column>
              <el-table-column prop="resc" label="资源"> </el-table-column>
            </el-table>
          </div>
        </div>
        <!-- 环境参数 -->
        <div class="dataScreen-parameter">
          <!-- 标题 -->
          <div class="dataScreen-paratitle">
            <p>环境参数</p>
          </div>
          <!-- 参数列表 -->
          <div class="dataScreen-paraBox">
            <div class="concentration1">
              <div id="hygrometer"></div>
              <p style="color: #a1c3dc; font-size: 12px">甲烷(%LEL)</p>
            </div>
            <div class="concentration1">
              <div id="hygrometer2"></div>
              <p style="color: #a1c3dc; font-size: 12px">氧气(%)</p>
            </div>
            <div class="concentration1">
              <div id="hygrometer3"></div>
              <p style="color: #a1c3dc; font-size: 12px">硫化氢(PPM)</p>
            </div>
            <div class="concentration1">
              <div id="hygrometer4"></div>
              <p style="color: #a1c3dc; font-size: 12px">现场温度(℃)</p>
            </div>
            <div class="concentration1">
              <div id="hygrometer5"></div>
              <p style="color: #a1c3dc; font-size: 12px">现场湿度(%LEL)</p>
            </div>
            <div class="concentration1">
              <div id="hygrometer6"></div>
              <p style="color: #a1c3dc; font-size: 12px">氨气(PPM)</p>
            </div>
          </div>
        </div>
      </div>
      <!-- 抽屉 -->
      <!-- 左边抽屉 -->
      <div class="left">
        <el-drawer :modal="false" :direction="direction" :visible.sync="drawer" :with-header="false" size="27%">
          <!-- plc面板 -->
          <div class="PLCpanel">
            <div class="PLCpanel-p1">
              <p>PLC面板</p>
            </div>
            <div class="PLCpanel-para">
              <p class="PLCpanel-parap1">显示参数</p>
              <p class="PLCpanel-parap2" style="width: 50px; height: 3px; background-color: #4691ff"></p>
              <el-select class="PLCpanel-parap3" v-model="selectedOption[0]" :placeholder="selectedOption[0]"
                @change="getOptionPLC">
                <el-option v-for="item in plcList" :key="item.robot_config_id + '_' + item.plc_num" :label="item.plc_name +
                  ' ' +
                  (item.plc_state == 1 ? '在线' : '离线')
                  " :value="item.robot_config_id + '_' + item.plc_num"></el-option>
              </el-select>
            </div>
            <div class="PLCpane3">
              <div class="PLCpane3-left" style="margin-right: 6px">
                <p class="P1">1#电门开到位</p>
                <p>{{ ddmkdw }}</p>
              </div>
              <div class="PLCpane3-left">
                <p class="P1">1#电门关到位</p>
                <p>{{ ddmgdw }}</p>
              </div>
            </div>
            <div>
              <img src="../../components/images/line.png" alt="" />
            </div>
            <div class="PLCpane3">
              <div class="PLCpane3-left" style="margin-right: 6px">
                <p class="P1">2#电门开到位</p>
                <p>{{ ddmkdw2 }}</p>
              </div>
              <div class="PLCpane3-left">
                <p class="P1">2#电门关到位</p>
                <p>{{ ddmgdw2 }}</p>
              </div>
            </div>
          </div>
          <!-- 公共操作 -->
          <div class="operation">
            <div class="operation1">
              <p class="operation-p1">公共操作</p>
              <p class="operation-p2" style="width: 50px; height: 3px; background-color: #4691ff"></p>
            </div>
            <div v-hasPermi="['robot:bgcz:view']">
              <div class="operation2">
                <img src="../../components/images/door.png" alt="" style="width: 20px; height: 20px" />
                <p>1#电动门</p>
              </div>
              <div style="display: flex">
                <div class="operation3">
                  <el-button class="operation3-1" size="mini" @click="bzg()">电动门(开)</el-button>
                  <el-button class="operation3-2" size="mini" @click="bgtz()">停止</el-button>
                </div>
                <div class="operation4">
                  <el-button class="operation4-1" size="mini" @click="bwg()">电动门(关)</el-button>
                </div>
              </div>
              <div>
                <img src="../../components/images/line.png" alt="" />
              </div>
            </div>
            <div v-hasPermi="['robot:ddmcz:view']">
              <div class="operation2">
                <img src="../../components/images/door.png" alt="" style="width: 20px; height: 20px" />
                <p>2#电动门</p>
              </div>
              <div style="display: flex">
                <div class="operation3">
                  <el-button class="operation3-1" size="mini" @click="ddmk()">电动门(开)</el-button>
                  <el-button class="operation3-2" size="mini" @click="ddmzt()">停止</el-button>
                </div>
                <div class="operation4">
                  <el-button class="operation4-1" size="mini" @click="ddmg()">电动门(关)</el-button>
                </div>
              </div>
            </div>
          </div>
        </el-drawer>
      </div>
      <!-- 右边抽屉 -->
      <div class="right">
        <el-drawer :modal="false" :direction="directions" :visible.sync="dialog" :with-header="false" size="26%">
          <div class="right-top">
            <div class="right-topTitle">
              <p>机器人面板</p>
            </div>

            <div class="Speed-dial">
              <div id="gauges2" ref="gauges2" style="width: 30%; height: 100px; margin-top: 40px"></div>
              <div id="gauges" ref="gauges" style="width: 38%; height: 140px; margin-top: 4px"></div>
              <div id="gauges3" ref="gauges3" style="width: 30%; height: 100px; margin-top: 40px"></div>
            </div>

            <div class="right-mode">
              <div class="mode-box">
                <p>现场温度</p>
                <p>{{ xcwd }}</p>
              </div>
              <div class="mode-box">
                <p>现场湿度</p>
                <p>{{ xcsd }}</p>
              </div>
              <div class="mode-box">
                <p>模式</p>
                <p>{{ jqrms }}</p>
              </div>
              <div class="mode-box">
                <p>方向</p>
                <p>{{ jqrfx }}</p>
              </div>
              <div class="mode-box">
                <p>电池电压</p>
                <p>{{ dcdy }}</p>
              </div>
            </div>
            <div style="margin-left: 14px; margin-bottom: 5px">
              <img src="../../components/images/line.png" alt="" />
            </div>
            <div class="Mode-selection">
              <p>模式选择</p>
            </div>
            <!-- 五个按钮 -->
            <div class="Operation-button" id="#btn">
              <div class="Operation-buttonBox" @click="jqrmsF('1')">
                <el-button size="mini" circle @click="selectedTab = 0"></el-button>
                <p>手动模式</p>
              </div>
              <!--              <div class="Operation-buttonBox" @click="jqrmsF('2')">-->
              <!--                  <el-button size="mini" circle style="-->
              <!--                                                  background: linear-gradient(227deg, #0F947C, #10DAB2);">-->
              <!--                  </el-button>-->
              <!--                  <p>自动模式</p>-->
              <!--             </div>-->
              <div class="Operation-buttonBox" @click="jqrzymsF('0')" v-hasPermi="['robot:syzyms:view']">
                <el-button @click="selectedTab = 3" size="mini" circle
                  style="background: linear-gradient(227deg, #c45016, #f58614)">
                </el-button>
                <p>自由</p>
              </div>
              <div class="Operation-buttonBox" @click="jqrzymsF('3')">
                <el-button size="mini" circle style="background: linear-gradient(227deg, #337f17, #3ca813)">
                </el-button>
                <p>返航</p>
              </div>
              <div class="Operation-buttonBox" @click="zt()">
                <el-button size="mini" circle style="background: linear-gradient(227deg, #b72517, #ea392d)">
                </el-button>
                <p>暂停</p>
              </div>
            </div>
          </div>
          <!-- 手动模式 -->
          <div class="right-bottom1" v-if="selectedTab === 0">
            <div class="right-bottomTitle">
              <p>手动模式</p>
              <p></p>
            </div>
            <div style="display: flex; flex-direction: column; align-items: center">
              <div class="Target-position">
                <div class="Target-position1">
                  <p contenteditable="true" id="mbwzid">0</p>
                  <p>m</p>
                </div>
                <div class="Target-position2">
                  <p style="cursor: pointer" @click="mbwzF()">目标位置</p>
                </div>
              </div>
              <div class="Speed-setting">
                <div class="Speed-setting1">
                  <el-dropdown @command="sdmslb" style="margin-left: 12px">
                    <el-button type="primary" size="min" style="
                        width: 80px;
                        height: 30px;
                        background: #17255d !important;
                        border: 2px solid #54619d;
                        border-radius: 10px;
                        font-size: 12px;
                        font-family: Bahnschrift;
                        font-weight: 400;
                        color: #c1c1c1;
                      ">
                      {{ sdmssdzd
                      }}<i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item command="0">0</el-dropdown-item>
                      <el-dropdown-item command="1000">1000</el-dropdown-item>
                      <el-dropdown-item command="2000">2000</el-dropdown-item>
                      <el-dropdown-item command="3000">3000</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                  <p>r/min</p>
                </div>
                <div class="Target-position2">
                  <p style="cursor: pointer" @click="sdmsdF()">设定速度</p>
                </div>
              </div>
              <div class="right-bottomBox4" v-if="showButtons">
                <el-button class="btn1" size="default" @click="fgfun()">放钩</el-button>
                <el-button class="btn2" size="default" @click="sgfun()">收钩</el-button>
              </div>
              <div class="Operation-Btn">
                <el-button class="Operation-Btn1" size="mini" @click="sdmsqd()">启动</el-button>
                <el-button class="Operation-Btn2" size="mini" @click="sdmsqj()">前进</el-button>
                <el-button class="Operation-Btn3" size="mini" @click="sdmsht()">后退</el-button>
              </div>
            </div>
          </div>
          <!-- 自动模式 -->
          <div class="right-bottom2" v-if="selectedTab === 1">
            <div class="right-bottomTitle">
              <p>自动模式</p>
              <span></span>
            </div>
            <div class="right-bottomBox">
              <div class="right-bottomBox1">
                <el-dropdown @command="zdmslb">
                  <el-button type="primary" size="min" style="
                      width: 80px;
                      height: 30px;
                      background: #17255d !important;
                      display: flex;
                      justify-content: space-around;
                      align-items: center;
                      border: 2px solid #54619d;
                      border-radius: 10px;
                      font-size: 12px;
                      font-family: Bahnschrift;
                      font-weight: 400;
                      color: #c1c1c1;
                    ">
                    {{ zdmssdzd
                    }}<i class="el-icon-arrow-down el-icon--right"></i>
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="0">0</el-dropdown-item>
                    <el-dropdown-item command="1000">1000</el-dropdown-item>
                    <el-dropdown-item command="2000">2000</el-dropdown-item>
                    <el-dropdown-item command="3000">3000</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
                <span>r/min</span>
                <el-button class="btn" size="default" @click="zdmsdsd()">速度设定</el-button>
              </div>
              <div class="right-bottomBox2" v-if="showButtons">
                <el-button class="btn1" size="default" @click="fgfun()">放钩</el-button>
                <el-button class="btn2" size="default" @click="sgfun()">收钩</el-button>
              </div>
              <div class="right-bottomBox3">
                <el-button class="btn1" size="default" @click="sdmsqd()">启动</el-button>
                <el-button class="btn2" size="default" @click="sdmsqj()">前进</el-button>
                <el-button class="btn3" size="default" @click="sdmsht()">后退</el-button>
              </div>
            </div>
          </div>
          <!-- 一键返航 -->
          <div class="right-bottom3" v-if="selectedTab === 2">
            <div class="right-bottomTitle">
              <p>一键返航</p>
              <span></span>
            </div>
            <div class="right-bottomBox">
              <el-button class="btn" size="default" @click="yjfh()">返航</el-button>
            </div>
          </div>
          <!-- 自由模式 -->
          <div class="right-bottom4" v-if="selectedTab === 3">
            <div class="right-bottomTitle">
              <p>自由模式</p>
              <span></span>
            </div>
            <div class="right-bottomBox">
              <div class="right-bottomBox1">
                <el-dropdown @command="zymslb">
                  <el-button type="primary" size="min" style="
                      width: 80px;
                      height: 30px;
                      background: #17255d !important;
                      display: flex;
                      justify-content: space-around;
                      align-items: center;
                      border: 2px solid #54619d;
                      border-radius: 10px;
                      font-size: 12px;
                      font-family: Bahnschrift;
                      font-weight: 400;
                      color: #c1c1c1;
                    ">
                    {{ zymssdzd
                    }}<i class="el-icon-arrow-down el-icon--right"></i>
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="0">0</el-dropdown-item>
                    <el-dropdown-item command="1000">1000</el-dropdown-item>
                    <el-dropdown-item command="2000">2000</el-dropdown-item>
                    <el-dropdown-item command="3000">3000</el-dropdown-item>
                    <el-dropdown-item command="4000">4000</el-dropdown-item>
                    <el-dropdown-item command="5000">5000</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
                <span>r/min</span>
                <el-button class="btn" size="default" @click="zymsdsd()">速度设定</el-button>
              </div>
              <div class="right-bottomBox2" v-if="showButtons">
                <el-button class="btn1" size="default" @click="fgfun()">放钩</el-button>
                <el-button class="btn2" size="default" @click="sgfun()">收钩</el-button>
              </div>
              <div class="right-bottomBox3">
                <el-button class="btn1" size="default" @click="zymsqd()">启动</el-button>
                <el-button class="btn2" size="default" @click="zymsqj()">前进</el-button>
                <el-button class="btn3" size="default" @click="zymsht()">后退</el-button>
              </div>
            </div>
          </div>
        </el-drawer>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import "echarts-liquidfill";
import { listonPageRobotConfig } from "@/api/robot/robotconfig/robotconfig";
import { getTrackMaprobot } from "@/api/robot/trackmap/trackmap";
import rbt from "@/assets/imgs/rbt3.png";
import rbt1 from "@/assets/imgs/rbt4.png";
import point from "@/assets/imgs/point1.png";
import { listsPlc } from "@/api/robot/plc/plc";
import {
  bgtzCmd,
  bwgCmd,
  bzgCmd,
  ddmkCmd,
  ddmztCmd,
  ddspCmd,
  dmgCmd,
  fgCmd,
  htCmd,
  ippingCmd,
  isadminCmd,
  jqrdataCmd,
  jqrsdCmd,
  jqrsdzymsCmd,
  lxspCmd,
  mbwzCmd,
  msszCmd,
  plcdataCmd,
  qjCmd,
  robotrunCmd,
  robotstopCmd,
  sgCmd,
  xjsdCmd,
  yjfhCmd,
  zdqdCmd,
  zymshtCmd,
  zymsmsszCmd,
  zymsqjCmd,
  zymsrobotrunCmd,
} from "@/api/robot/modbus/modbus";
import { onLineStatus } from "@/api/robot/camera/cameraDH/video";
import $ from "jquery";
import { alarmtaskResult } from "@/api/robot/patroltask/patroltask";
import Vue from "vue";
import vueSeamlessScroll from "vue-seamless-scroll";
import flvjs from "flv.js";
import FlvExtend from "flv-extend";
import {
  flvQVideo,
  flvHVideo,
  flvQStop,
  flvHStop,
} from "@/api/robot/flvvideo/index";
import { ChangeState } from "@/api/robot/alarm/alarmData/alarm";
let myChart = null;
let myChart1 = null;
let myChart2 = null;
let myChart3 = null;
let myChart4 = null;
let myChart5 = null;
let myChart6 = null;
let myChart7 = null;
let myChart8 = null;
let myChart9 = null;
let myChart10 = null;
Vue.use(vueSeamlessScroll);
export default {
  /* 获取最外层盒子 */
  name: "home",
  data() {
    return {
      //是否展示视频
      videoShowQ: false,
      videoShowH: false,
      //存放没有数据时提示信息的
      result: [],
      //控制点击救援增加的按钮
      showButtons: false,
      zymssdzd: 1000, //自由模式速度设定
      zdmssdzd: 1000, //自动模式速度设定
      sdmssdzd: 1000, //手动模式速度设定
      //切换不同的监控画面,默认大华的类型
      camera_type: 0,

      //控制模式板块的切换(表示默认显示第一个内容)
      selectedTab: 0,
      timerval: null, // 定时器名称
      //报警列表
      alarms: [],
      //查询参数
      queryparm: {
        robot_config_id: undefined,
        robot_id: undefined,
        robotid: undefined,
        valu: undefined,
        robot_ip: undefined,
        robot_port: undefined,
        plcip: undefined,
        plcport: undefined,
        residence_time: undefined,
      },
      queryparms3: {
        robot_id: undefined,
        valu: undefined,
        robot_ip: undefined,
        robot_port: undefined,
        plcip: undefined,
        plcport: undefined,
        video_ip1: undefined,
        video_name1: undefined,
        video_pwd1: undefined,
        video_port1: undefined,
        residence_time: undefined,
        plcid: undefined,
        video_ip2: undefined,
        video_name2: undefined,
        video_pwd2: undefined,
        video_port2: undefined,
      }, //摄像头参数
      queryparms4: {
        valu: undefined,
        video_ip1: localStorage.getItem("video_ip1"),
        video_name1: localStorage.getItem("video_name1"),
        video_pwd1: localStorage.getItem("video_pwd1"),
        video_port1: localStorage.getItem("video_port1"),
        residence_time: undefined,
        video_ip2: localStorage.getItem("video_ip2"),
        video_name2: localStorage.getItem("video_name2"),
        video_pwd2: localStorage.getItem("video_pwd2"),
        video_port2: localStorage.getItem("video_port2"),
        robot_config_id: localStorage.getItem("robot_config_id"),
      },
      //plc列表数据
      plcList: [],
      //plc在线个数
      onlinePlc: "",
      reports: [],
      queryParams: {
        plc_name: undefined,
      },
      queryParams1: {
        plcid: undefined,
      },
      queryParams2: {
        robotid: undefined,
      }, //plc默认选中项
      selectedOption: [],
      patrols: [{ creater_time_str: "暂无数据" }],
      //机器人列表
      robots: [],
      //机器人状态
      robotState: "",
      arrdata: [[]],
      robotid: undefined,
      creater_time_str: undefined,
      resc: undefined,
      //表单参数
      form: {},
      //机器人列表
      loading: true, //遮罩层
      count: 0,
      //查询参数
      sswy: "无", //实时位移
      gdzcd: "无", //轨道长度
      tzcd: "无", //停止充电
      kqcd: "无", //开始充电
      tsjxj: "无", //准备下降提升机
      tsjss: "无", //准备上升提升机
      gbddm: "无", //准备关闭电动门
      kqddm: "无", //准备开启电动门
      djwd: "无", //电机温度
      dj1: "无", //1#电机
      dj2: "无", //2#电机
      sxt1: "无", //1#摄像头
      sxt2: "无", //2#摄像头
      zmd1: "无", //照明灯1
      zmd2: "无", //照明灯2
      yxd: "无", //运行灯
      sg: "无", //收钩
      fg: "无", //放钩
      djzs: "无", //电机转速
      jw: "无", //甲烷
      yq: "无", //氧气
      lhq: "无", //硫化氢
      aq: "无", //氨气
      xcwd: "无", //现场温度
      xcsd: "无", //现场湿度
      dczt: "无", //电池状态
      dcdl: "无", //电池电量
      dcdy: "无", //电池电压
      dqjcdwz: "无", //当前巡检点位置
      gswl: "无", //格栅设定数量
      jcgssl: "无", //检测格栅孔数量
      jqrms: "无", //机器人模式
      jqrsd: "无", //机器人速度设定
      jqrfx: "无", //机器人方向
      mbwz: "无", //目标位置值设定
      cdzdwxh1: "无", //充电桩机器人到位信号1
      cdzdwxh2: "无", //充电桩机器人到位信号1
      tsjjqrdwxh1: "无", //提升装置机器人到位信号1
      tsjjqrdwxh2: "无", //提升装置机器人到位信号2
      ddmkdw: "无", //电动门开到位
      ddmgdw: "无", //电动门关到位
      ddmkdw2: "无", //电动门开到位
      ddmgdw2: "无", //电动门关到位
      tsjssdw1: "无", //提升装置轨道到位1（上升到位）
      tsjxjdw2: "无", //提升装置轨道到位2（下降到位）
      // 警告数据中间
      animate: false,
      input: 20,
      drawer: false,
      dialog: false,
      direction: "ltr",
      directions: "rtl",
      timer: null,
      timer1: null,
      timer2: null,
      //控制机器人的滚动条
      isDologin: false,
      rtspQurl: "", //前rtsp视频流地址
      flvQUrl: null, //请求回来的flv视频流地址
      flvPlayer: null,
      flvPlayerH: null, //后
      rtspHurl: "", //后rtsp视频流地址
      flvHUrl: null, //请求回来的flv视频流地址
      camerArry: [], //接收摄像头状态数据
      foundQCamera: null, //前摄像在线离线数据
      foundHCamera: null, //后摄像在线离线数据
      Qonline: "", //前摄像头在线
      Honline: "", //后摄像头在线
      picpath: undefined,
      mapsite: undefined,
    };
  },
  created() {
    //初始化页面加载方法
    this.getrobotList(); //初始化机器人列表数据
    this.getplcList(); //初始化plc列表数据
    this.getMap(); //电子地图
    this.getQOnlie(); //摄像头状态
  },
  mounted() {
    //加载完页面加载方法
    //是否显示脱钩、放钩按钮
    localStorage.getItem("robotype") === "1"
      ? (this.showButtons = true)
      : (this.showButtons = false);
    //标题初始化
    $("#robotxj").text(
      localStorage.getItem("robot_name") == null
        ? "机器人巡检监控"
        : localStorage.getItem("robot_name") + "巡检监控"
    );
    //定时器轮询程序
    this.timer = setInterval(() => {
      this.getrobotList(); //机器人列表
      this.getplcList(); //plc列表
      this.getMap(); //电子地图
      this.robotdata(); //机器人实时数据、环境参数水滴图
      this.plcdata(); //plc实时数据
      this.alarmtask(); //报警数据、巡检列表
    }, 2000); //2000毫秒
    this.getQOnlie();
    if (this.camera_type != null && localStorage.getItem("camera_type") != "") {
      //====大华摄像头======
      if (this.camera_type == 0) {
        //大华前摄像头
        if (
          localStorage.getItem("video_ip1") != null &&
          localStorage.getItem("video_ip1") != ""
        ) {
          this.stopQFlvVideo(); //停止前flv流
          //检测摄像头ip通不通
          ippingCmd(localStorage.getItem("video_ip1")).then((response) => {
            if (
              typeof response.data.data != "undefined" &&
              response.data.data != null &&
              response.data.data == true
            ) {
              this.flvQspbf();
              this.videoShowQ = true;
            } else {
              this.videoShowQ = false; //如果ip密码账户名不存在则隐藏前摄像头
            }
          });
        } else {
          this.videoShowQ = false; //如果ip密码账户名不存在则隐藏前摄像头
        }
        //大华后摄像头
        if (
          localStorage.getItem("video_ip2") != null &&
          localStorage.getItem("video_ip2") != ""
        ) {
          this.stopHFlvVideo(); //停止后lv流
          //检测摄像头ip通不通
          ippingCmd(localStorage.getItem("video_ip2")).then((response) => {
            if (
              typeof response.data.data != "undefined" &&
              response.data.data != null &&
              response.data.data == true
            ) {
              this.flvHspbf();
              this.videoShowH = true;
            } else {
              this.videoShowH = false;
            }
          });
        } else {
          this.videoShowH = false;
        }
      }
    }
  },
  methods: {
    alarmHandle(alarm) {
      ChangeState(alarm.id).then((response) => {
        if (response.code == 200) {
          this.alarmtask();
        }
      });
    },
    //获取前摄像头转流地址
    flvQspbf() {
      const rtspQurl = {
        rtspUrl:
          "rtsp://" +
          localStorage.getItem("video_name1") +
          ":" +
          localStorage.getItem("video_pwd1") +
          "@" +
          localStorage.getItem("video_ip1") +
          ":" +
          554 +
          "/cam/realmonitor?channel=1&subtype=0",
      };
      flvQVideo(rtspQurl).then((response) => {
        this.flvQUrl = response.data;
        localStorage.setItem("flvQUrl", this.flvQUrl);
        this.createQFlvPlayer(response.data);
      });
    },
    //获取后摄像头转流地址
    flvHspbf() {
      const rtspHurl = {
        rtspUrl:
          "rtsp://" +
          localStorage.getItem("video_name2") +
          ":" +
          localStorage.getItem("video_pwd2") +
          "@" +
          localStorage.getItem("video_ip2") +
          ":" +
          554 +
          "/cam/realmonitor?channel=1&subtype=0",
      };
      flvHVideo(rtspHurl).then((response) => {
        this.flvHUrl = response.data;
        localStorage.setItem("flvHUrl", this.flvHUrl);
        this.createHFlvPlayer(response.data);
      });
    },
    //播放前摄像头flv
    createQFlvPlayer(flvQUrl) {
      // 根据FLV URL创建播放器实例
      if (flvjs.isSupported()) {
        const videoElement = document.getElementById("DHQvideo");
        if (videoElement) {
          // 配置需要的功能
          this.flvPlayer = new FlvExtend({
            element: videoElement, // *必传
            frameTracking: true, // 开启追帧设置
            updateOnStart: true, // 点击播放后更新视频
            updateOnFocus: true, // 获得焦点后更新视频
            reconnect: true, // 开启断流重连
            reconnectInterval: 0, // 断流重连间隔
          });

          // 调用 init 方法初始化视频
          // init 方法的参数与 flvjs.createPlayer 相同，并返回 flvjs.player 实例
          const player = this.flvPlayer.init(
            {
              type: "flv",
              url: flvQUrl,
              isLive: true,
            },
            {
              enableStashBuffer: false, // 如果您需要实时（最小延迟）来进行实时流播放，则设置为false
              autoCleanupSourceBuffer: true, // 对SourceBuffer进行自动清理
              stashInitialSize: 128, // 减少首帧显示等待时长
              enableWorker: true, // 启用分离的线程进行转换
            }
          );
          // 直接调用play即可播放
          player.play();
        }
      }
    },
    //播放后摄像头flv
    createHFlvPlayer(flvHUrl) {
      // 根据FLV URL创建播放器实例
      if (flvjs.isSupported()) {
        const videoElementH = document.getElementById("DHHvideo");
        if (videoElementH) {
          // 配置需要的功能
          this.flvPlayerH = new FlvExtend({
            element: videoElementH, // *必传
            frameTracking: true, // 开启追帧设置
            updateOnStart: true, // 点击播放后更新视频
            updateOnFocus: true, // 获得焦点后更新视频
            reconnect: true, // 开启断流重连
            reconnectInterval: 0, // 断流重连间隔
          });
          // 调用 init 方法初始化视频
          // init 方法的参数与 flvjs.createPlayer 相同，并返回 flvjs.player 实例
          const player = this.flvPlayerH.init(
            {
              type: "flv",
              url: flvHUrl,
              isLive: true,
            },
            {
              enableStashBuffer: false, // 如果您需要实时（最小延迟）来进行实时流播放，则设置为false
              autoCleanupSourceBuffer: true, // 对SourceBuffer进行自动清理
              stashInitialSize: 128, // 减少首帧显示等待时长
              enableWorker: true, // 启用分离的线程进行转换
            }
          );
          // 直接调用play即可播放
          player.play();
        }
      }
    },
    //停止前摄像头flv视频流
    stopQFlvVideo() {
      flvQStop().then((response) => { });
    },
    //停止后摄像头flv视频流
    stopHFlvVideo() {
      flvHStop().then((response) => { });
    },
    //根据机器人查询数据
    selectrobot(row) {
      //this.robotState = row.robot_state
      localStorage.removeItem("pic_head");//图片地址
      localStorage.removeItem("map_site");//地图位置
      localStorage.removeItem("robot_config_id"); //删除机器人id
      localStorage.removeItem("robot_name"); //删除机器人名称
      localStorage.removeItem("video_ip1"); //删除摄像头1ip
      localStorage.removeItem("video_port1"); //删除摄像头1端口号
      localStorage.removeItem("video_name1"); //删除摄像头1账号
      localStorage.removeItem("video_pwd1"); //删除摄像头1密码
      localStorage.removeItem("video_ip2"); //删除摄像头2ip
      localStorage.removeItem("video_port2"); //删除摄像头2端口号
      localStorage.removeItem("video_name2"); //删除摄像头2账号
      localStorage.removeItem("video_pwd2"); //删除摄像头2密码
      localStorage.removeItem("robotype"); //删除机器人类型
      localStorage.removeItem("camera_type"); //删除摄像头类型
      localStorage.setItem("robot_config_id", row.id); //存储值
      localStorage.setItem("robot_name", row.robot_name); //存储值
      localStorage.setItem("video_ip1", row.video_ip1); //存储值
      localStorage.setItem("video_port1", row.video_port1); //存储值
      localStorage.setItem("video_name1", row.video_name1); //存储值
      localStorage.setItem("video_pwd1", row.video_pwd1); //存储值
      localStorage.setItem("video_ip2", row.video_ip2); //存储值
      localStorage.setItem("video_port2", row.video_port2); //存储值
      localStorage.setItem("video_name2", row.video_name2); //存储值
      localStorage.setItem("video_pwd2", row.video_pwd2); //存储值
      localStorage.setItem("robotype", row.robot_type); //存储值
      localStorage.setItem("camera_type", row.camera_type); //存储值
      localStorage.setItem("pic_head", row.pic_head);//存储值
      localStorage.setItem("map_site", row.map_site);//存储值
      this.queryparm.robotid = localStorage.getItem("robot_config_id");
      this.queryparm.residence_time = localStorage.getItem("residence_time"); //设置停留时间
      //摄像头参数
      this.queryparms4.video_ip1 = localStorage.getItem("video_ip1");
      this.queryparms4.video_name1 = localStorage.getItem("video_name1");
      this.queryparms4.video_pwd1 = localStorage.getItem("video_pwd1");
      this.queryparms4.video_port1 = localStorage.getItem("video_port1");
      this.queryparms4.video_ip2 = localStorage.getItem("video_ip2");
      this.queryparms4.video_name2 = localStorage.getItem("video_name2");
      this.queryparms4.video_pwd2 = localStorage.getItem("video_pwd2");
      this.queryparms4.video_port2 = localStorage.getItem("video_port2");
      this.queryparms4.robot_config_id =
        localStorage.getItem("robot_config_id");
      $("#robotxj").text(localStorage.getItem("robot_name") + "巡检监控"); //机器人名称标题
      localStorage.getItem("robotype") === "1"
        ? (this.showButtons = true)
        : (this.showButtons = false); //是否显示脱钩、放钩按钮
      this.getplcList(); //根据机器人id查询plc列表
      this.robotdata(); //查询当前机器人数据
      this.camera_type = localStorage.getItem("camera_type");
      this.getQOnlie(); //摄像头状态
      //====大华摄像头======
      if (
        this.camera_type != null &&
        localStorage.getItem("camera_type") != ""
      ) {
        //====大华摄像头======
        if (this.camera_type == 0) {
          //大华前摄像头
          if (
            localStorage.getItem("video_ip1") != null &&
            localStorage.getItem("video_ip1") != ""
          ) {
            this.stopQFlvVideo(); //停止前flv流
            //检测摄像头ip通不通
            ippingCmd(localStorage.getItem("video_ip1")).then((response) => {
              if (
                typeof response.data.data != "undefined" &&
                response.data.data != null &&
                response.data.data == true
              ) {
                if (this.flvPlayer != null) {
                  this.flvPlayer.destroy();
                  this.flvPlayer = null;
                }
                this.flvQspbf();
                this.videoShowQ = true;
              } else {
                this.videoShowQ = false; //如果ip密码账户名不存在则隐藏前摄像头
              }
            });
          } else {
            this.videoShowQ = false; //如果ip密码账户名不存在则隐藏前摄像头
          }
          //大华后摄像头
          if (
            localStorage.getItem("video_ip2") != null &&
            localStorage.getItem("video_ip2") != ""
          ) {
            this.stopHFlvVideo(); //停止后flv流
            //this.stopQFlvVideo()  //停止后flv流
            //检测摄像头ip通不通
            ippingCmd(localStorage.getItem("video_ip2")).then((response) => {
              if (
                typeof response.data.data != "undefined" &&
                response.data.data != null &&
                response.data.data == true
              ) {
                //this.flvPlayerH.destroy(); // 销毁现有的播放器实例
                if (this.flvPlayerH != null) {
                  this.flvPlayerH.destroy();
                  this.flvPlayerH = null;
                }
                this.flvHspbf();
                this.videoShowH = true;
              } else {
                this.videoShowH = false;
              }
            });
          } else {
            this.videoShowH = false;
          }
        }
      }
    },
    //获取摄像头在线或离线
    getQOnlie() {
      //====== 大华摄像头==========
      if (this.camera_type == 0) {
        if (
          localStorage.getItem("video_ip1") != null &&
          localStorage.getItem("video_ip1") != "" &&
          localStorage.getItem("video_ip2") != null &&
          localStorage.getItem("video_ip2") != "" &&
          localStorage.getItem("video_name1") != null &&
          localStorage.getItem("video_name1") != "" &&
          localStorage.getItem("video_name2") != null &&
          localStorage.getItem("video_name2") != "" &&
          localStorage.getItem("video_pwd1") != null &&
          localStorage.getItem("video_pwd1") != "" &&
          localStorage.getItem("video_pwd2") != null &&
          localStorage.getItem("video_pwd2") != "" &&
          localStorage.getItem("video_port1") != null &&
          localStorage.getItem("video_port1") != "" &&
          localStorage.getItem("video_port2") != null &&
          localStorage.getItem("video_port2") != ""
        ) {
          this.queryparms4.robot_config_id =
            localStorage.getItem("robot_config_id");
          onLineStatus(this.queryparms4).then((response) => {
            this.camerArry = response.data;
            // 遍历外部数组------前摄像头
            this.foundQCamera = [];
            for (const arr of this.camerArry) {
              // 使用 filter() 方法获取所有符合条件的对象
              const found = arr.filter(
                (camer) =>
                  camer.cameraName === "前摄像头" && camer.loginValue === 0
              );
              // 将找到的对象添加到结果数组中
              this.foundQCamera.push(...found);
              this.Qonline = this.foundQCamera.length;
            }

            // 遍历外部数组------后摄像头
            this.foundHCamera = [];
            for (const arr of this.camerArry) {
              // 使用 filter() 方法获取所有符合条件的对象
              const found = arr.filter(
                (camer) =>
                  camer.cameraName === "后摄像头" && camer.loginValue === 0
              );
              // 将找到的对象添加到结果数组中
              this.foundHCamera.push(...found);
              this.Honline = this.foundHCamera.length;
            }
          });
        }
      } else {
        this.onlineList = null;
      }
      //====== 吊舱摄像头==========
      if (this.camera_type == 2) {
        this.queryparms4.robot_config_id =
          localStorage.getItem("robot_config_id");
        if (
          localStorage.getItem("video_ip1") != null &&
          localStorage.getItem("video_ip1") != ""
        ) {
          onLineStatus(this.queryparms4).then((response) => {
            // this.OnlineArry1 = response.data[0];
            // this.OnlineArry2 = response.data[1];
            // this.onlineList = [...this.OnlineArry1, ...this.OnlineArry2]
          });
        }
      } else {
        this.onlineList = null;
      }
      //====== 海康摄像头==========
      if (this.camera_type == 1) {
        if (
          localStorage.getItem("video_ip1") != null &&
          localStorage.getItem("video_ip1") != "" &&
          localStorage.getItem("video_name1") != null &&
          localStorage.getItem("video_name1") != "" &&
          localStorage.getItem("video_pwd1") != null &&
          localStorage.getItem("video_pwd1") != "" &&
          localStorage.getItem("video_port1") != null &&
          localStorage.getItem("video_port1") != ""
        ) {
          this.queryparms4.robot_config_id =
            localStorage.getItem("robot_config_id");
          onLineStatus(this.queryparms4).then((response) => {
            // this.OnlineArry1 = response.data[0];
            // this.OnlineArry2 = response.data[1];
            // this.onlineList = [...this.OnlineArry1, ...this.OnlineArry2]
          });
        }
      } else {
        this.onlineList = null;
      }
    },
    //定时任务查询当前机器人数据柱状图
    robotdata() {
      this.queryparm.robotid = localStorage.getItem("robot_config_id");
      if (
        typeof this.queryparm.robotid != "undefined" &&
        this.queryparm.robotid != null &&
        this.queryparm.robotid != ""
      ) {
        //实时数据
        jqrdataCmd(this.queryparm).then((response) => {
          if (typeof response.data != "undefined" && response.data != null) {
            this.dczt = response.data.dczt; //电池状态
            this.sswy = response.data.sswy; //实时位移
            this.gdzcd = response.data.gdzcd; //轨道长度
            this.dcdy = response.data.dcdy; //电池电压
            this.djwd = response.data.djwd; //电机温度
            this.djzs = response.data.djzs; //电机转速
            this.dcdl = response.data.dcdl; //电池电量
            this.jqrfx = response.data.jqrfx; //机器人方向
            this.jqrms = response.data.jqrms; //机器人模式
            this.jw = response.data.jw; //甲烷浓度
            this.yq = response.data.yq; //氧气浓度
            this.aq = response.data.aq; //氨气
            this.lhq = response.data.lhq; //硫化氢
            this.xcwd = response.data.xcwd; //现场温度
            this.xcsd = response.data.xcsd; //现场湿度
            this.gswl = response.data.gswl; //格栅设定数量
            this.jcgssl = response.data.jcgssl; //检测格栅孔数量
            this.dj1 = response.data.dj1; //1#电机
            this.dj2 = response.data.dj2; //2#电机
            this.sxt1 = response.data.sxt1; //1#摄像头
            this.sxt2 = response.data.sxt2; //2#摄像头
            this.zmd1 = response.data.zmd1; //照明灯1
            this.zmd2 = response.data.zmd2; //照明灯2
            this.yxd = response.data.yxd; //运行灯
            this.sg = response.data.sg; //收钩
            this.fg = response.data.fg; //放钩
            this.drawLiquidfill(
              this.yq,
              this.jw,
              this.lhq,
              this.aq,
              this.xcsd,
              this.xcwd,
              localStorage.getItem("robot_name")
            );
            if (this.dialog) {
              this.echarts1(this.djzs); //电机转速
              this.echarts2(this.djwd); //电机温度
              this.echarts3(this.dcdl); //电池电量
            }
          } else {
            this.dczt = "无"; //电池状态
            this.sswy = "无"; //实时位移
            this.gdzcd = "无"; //轨道长度
            this.dcdy = "无"; //电池电压
            this.djwd = "无"; //电机温度
            this.djzs = "无"; //电机转速
            this.dcdl = "无"; //电池电量
            this.jqrfx = "无"; //机器人方向
            this.jqrms = "无"; //机器人模式
            this.jw = "无"; //甲烷浓度
            this.yq = "无"; //氧气浓度
            this.aq = "无"; //氨气
            this.lhq = "无"; //硫化氢
            this.xcwd = "无"; //现场温度
            this.xcsd = "无"; //现场湿度
            this.gswl = "无"; //格栅设定数量
            this.jcgssl = "无"; //检测格栅孔数量
            (this.dj1 = "无"), //1#电机
              (this.dj2 = "无"), //2#电机
              (this.sxt1 = "无"), //1#摄像头
              (this.sxt2 = "无"), //2#摄像头
              (this.zmd1 = "无"), //照明灯1
              (this.zmd2 = "无"), //照明灯2
              (this.yxd = "无"), //运行灯
              (this.sg = "无"), //收钩
              (this.fg = "无"), //放钩
              this.drawLiquidfill(
                0,
                0,
                0,
                0,
                0,
                0,
                localStorage.getItem("robot_name")
              );
            if (this.dialog) {
              this.echarts1(0); //电机转速
              this.echarts2(0); //电机温度
              this.echarts3(0); //电池电量
            }
          }
        });
      } else {
        this.dczt = "无"; //电池状态
        this.sswy = "无"; //实时位移
        this.gdzcd = "无"; //轨道长度
        this.dcdy = "无"; //电池电压
        this.djwd = "无"; //电机温度
        this.djzs = "无"; //电机转速
        this.dcdl = "无"; //电池电量
        this.jqrfx = "无"; //机器人方向
        this.jqrms = "无"; //机器人模式
        this.jw = "无"; //甲烷浓度
        this.yq = "无"; //氧气浓度
        this.aq = "无"; //氨气
        this.lhq = "无"; //硫化氢
        this.xcwd = "无"; //现场温度
        this.xcsd = "无"; //现场湿度
        this.gswl = "无"; //格栅设定数量
        this.jcgssl = "无"; //检测格栅孔数量
        (this.dj1 = "无"), //1#电机
          (this.dj2 = "无"), //2#电机
          (this.sxt1 = "无"), //1#摄像头
          (this.sxt2 = "无"), //2#摄像头
          (this.zmd1 = "无"), //照明灯1
          (this.zmd2 = "无"), //照明灯2
          (this.yxd = "无"), //运行灯
          (this.sg = "无"), //收钩
          (this.fg = "无"), //放钩
          this.drawLiquidfill(
            0,
            0,
            0,
            0,
            0,
            0,
            localStorage.getItem("robot_name")
          );
        if (this.dialog) {
          this.echarts1(0); //电机转速
          this.echarts2(0); //电机温度
          this.echarts3(0); //电池电量
        }
      }
    }, //定时刷新plc实时数据
    plcdata() {
      this.queryParams1.plcid = localStorage.getItem("plcid");
      if (
        typeof this.queryParams1.plcid != "undefined" &&
        this.queryParams1.plcid != null &&
        this.queryParams1.plcid != ""
      ) {
        plcdataCmd(this.queryParams1).then((response) => {
          if (typeof response.data != "undefined" && response.data != null) {
            this.cdzdwxh1 = response.data.cdzdwxh1; //充电桩机器人到位信号1
            this.cdzdwxh2 = response.data.cdzdwxh2; //充电桩机器人到位信号2
            this.tsjjqrdwxh1 = response.data.tsjjqrdwxh1; //提升装置到位信号1
            this.tsjjqrdwxh2 = response.data.tsjjqrdwxh2; //提升装置到位信号2
            this.tsjssdw1 = response.data.tsjssdw1; //提升装置轨道到位1（上升到位）
            this.tsjxjdw2 = response.data.tsjxjdw2; //提升装置轨道到位2（下降到位）
            this.ddmkdw = response.data.ddmkdw; //电动门开到位
            this.ddmgdw = response.data.ddmgdw; //电动门关到位
            this.ddmkdw2 = response.data.ddmkdw2; //电动门开到位
            this.ddmgdw2 = response.data.ddmgdw2; //电动门关到位
          } else {
            this.cdzdwxh1 = "无"; //充电桩机器人到位信号1
            this.cdzdwxh2 = "无"; //充电桩机器人到位信号2
            this.tsjjqrdwxh1 = "无"; //提升装置到位信号1
            this.tsjjqrdwxh2 = "无"; //提升装置到位信号2
            this.tsjssdw1 = "无"; //提升装置轨道到位1（上升到位）
            this.tsjxjdw2 = "无"; //提升装置轨道到位2（下降到位）
            this.ddmkdw = "无"; //电动门开到位
            this.ddmgdw = "无"; //电动门关到位
            this.ddmkdw2 = "无"; //电动门开到位
            this.ddmgdw2 = "无"; //电动门关到位
          }
        });
      } else {
        this.cdzdwxh1 = "无"; //充电桩机器人到位信号1
        this.cdzdwxh2 = "无"; //充电桩机器人到位信号2
        this.tsjjqrdwxh1 = "无"; //提升装置到位信号1
        this.tsjjqrdwxh2 = "无"; //提升装置到位信号2
        this.tsjssdw1 = "无"; //提升装置轨道到位1（上升到位）
        this.tsjxjdw2 = "无"; //提升装置轨道到位2（下降到位）
        this.ddmkdw = "无"; //电动门开到位
        this.ddmgdw = "无"; //电动门关到位
        this.ddmkdw2 = "无"; //电动门开到位
        this.ddmgdw2 = "无"; //电动门关到位
      }
    },
    //根据机器人id查询plc列表
    getplcList() {
      this.queryParams.robot_config_id =
        localStorage.getItem("robot_config_id");
      if (
        typeof this.queryParams.robot_config_id != "undefined" &&
        this.queryParams.robot_config_id != null &&
        this.queryParams.robot_config_id != ""
      ) {
        let fg = 0;
        listsPlc(this.queryParams).then((response) => {
          this.plcList = response.rows;
          if (typeof this.plcList != "undefined" && this.plcList.length > 0) {
            if (
              typeof this.selectedOption[0] != "undefined" &&
              this.selectedOption[0] != null
            ) {
              //获取当前在线plc赋值给选择列表框
              const plc_len = this.plcList.length;
              for (let i = 0; i < plc_len; i++) {
                if (
                  localStorage.getItem("plcid") ==
                  this.plcList[i].robot_config_id +
                  "_" +
                  this.plcList[i].plc_num
                ) {
                  this.selectedOption = [];
                  this.selectedOption.push(
                    this.plcList[i].plc_name +
                    " " +
                    (this.plcList[i].plc_state == 1 ? "在线" : "离线")
                  );

                  //查找出在线的plc
                  this.onlinePlc = this.selectedOption.filter((item) =>
                    item.includes("在线")
                  );

                  localStorage.removeItem("plcid"); //删除键值
                  localStorage.setItem(
                    "plcid",
                    this.plcList[i].robot_config_id +
                    "_" +
                    this.plcList[i].plc_num
                  ); //存储值
                  fg = 1;
                  break;
                }
              } //如果是没有相同值，赋新值给选择列表框
              if (fg == 0) {
                this.selectedOption = [];
                this.selectedOption.push(
                  this.plcList[i].plc_name +
                  " " +
                  (this.plcList[i].plc_state == 1 ? "在线" : "离线")
                );
                localStorage.removeItem("plcid"); //删除键值
                localStorage.setItem(
                  "plcid",
                  this.plcList[0].robot_config_id +
                  "_" +
                  this.plcList[0].plc_num
                ); //存储值
              }
            } else {
              //选择框没有赋值，赋新值给选择列表框
              this.selectedOption = [];
              this.selectedOption.push(
                this.plcList[0].plc_name +
                " " +
                (this.plcList[0].plc_state == 1 ? "在线" : "离线")
              ); //默认下拉框选择第一条记录
              localStorage.removeItem("plcid"); //删除键值
              localStorage.setItem(
                "plcid",
                this.plcList[0].robot_config_id + "_" + this.plcList[0].plc_num
              ); //存储值
            }
          } else {
            localStorage.removeItem("plcid"); //删除键值
            this.selectedOption = [];
            this.plcList = [];
          }
          this.plcdata(); //根据plc的id查询电气参数数据
        });
      }
    }, //根据机器人id查询报警、巡检列表
    alarmtask() {
      this.queryparm.robot_config_id = localStorage.getItem("robot_config_id");
      if (
        typeof this.queryparm.robot_config_id != "undefined" &&
        this.queryparm.robot_config_id != null &&
        this.queryparm.robot_config_id != ""
      ) {
        alarmtaskResult(this.queryparm).then((response) => {
          if (typeof response.data != "undefined" && response.data != null) {
            //巡检结果列表
            if (
              response.data.taskresult != null &&
              response.data.taskresult.length > 0
            ) {
              this.patrols = [];
              this.patrols = response.data.taskresult;
            } else {
              this.patrols = [{ creater_time_str: "暂无数据" }];
            } //报警结果列表
            if (
              response.data.alarmresult != null &&
              response.data.alarmresult.length > 0
            ) {
              this.alarms = [];
              this.alarms = response.data.alarmresult;
            } else {
              this.alarms = [];
            }
          }
        });
      }
    }, //*查询机器人列表
    getrobotList() {
      listonPageRobotConfig(this.queryParams).then((response) => {
        this.robots = response.rows;
      });
    }, //选择plc列表，缓存plcid
    getOptionPLC(plcid) {
      localStorage.removeItem("plcid"); //删除键值
      localStorage.setItem("plcid", plcid); //存储值
      this.plcdata(); //查询电气参数数据
    }, //目标位置
    mbwzF() {
      this.queryparms3.valu = $("#mbwzid").text();
      console.log("目标位置" + this.queryparms3.valu);
      if (this.queryparms3.valu != "") {
        this.queryparms3.robotid = localStorage.getItem("robot_config_id");
        mbwzCmd(this.queryparms3).then((response) => {
          if (typeof response != null) this.$modal.msg(response.msg);
        });
      } else {
        this.$modal.msgError("目标位置不能为空");
      }
    }, //手动模式速度设置
    sdmsdF() {
      this.queryparms3.valu = this.sdmssdzd;
      console.log("手动模式速度设置" + this.sdmssdzd);
      if (this.queryparms3.valu != "") {
        this.queryparms3.robotid = localStorage.getItem("robot_config_id");
        jqrsdCmd(this.queryparms3).then((response) => {
          if (typeof response != null) this.$modal.msg(response.msg);
        });
      } else {
        this.$modal.msgError("手动模式速度设置不能为空");
      }
    }, //电动门暂停
    ddmzt() {
      this.queryParams1.plcid = localStorage.getItem("plcid");
      ddmztCmd(this.queryParams1).then((response) => {
        if (typeof response != null) this.$modal.msg(response.msg);
      });
    }, //电动门关
    ddmg() {
      this.queryParams1.plcid = localStorage.getItem("plcid");
      dmgCmd(this.queryParams1).then((response) => {
        if (typeof response != null) this.$modal.msg(response.msg);
      });
    }, //电动门开
    ddmk() {
      this.queryParams1.plcid = localStorage.getItem("plcid");
      ddmkCmd(this.queryParams1).then((response) => {
        if (typeof response != null) this.$modal.msg(response.msg);
      });
    }, //变轨停止
    bgtz() {
      this.queryParams1.plcid = localStorage.getItem("plcid");
      bgtzCmd(this.queryParams1).then((response) => {
        if (typeof response != null) this.$modal.msg(response.msg);
      });
    }, //变直轨
    bzg() {
      this.queryParams1.plcid = localStorage.getItem("plcid");
      bzgCmd(this.queryParams1).then((response) => {
        if (typeof response != null) this.$modal.msg(response.msg);
      });
    }, //变弯轨
    bwg() {
      this.queryParams1.plcid = localStorage.getItem("plcid");
      bwgCmd(this.queryParams1).then((response) => {
        if (typeof response != null) this.$modal.msg(response.msg);
      });
    }, //放钩
    fgfun() {
      this.queryparms3.robotid = localStorage.getItem("robot_config_id");
      fgCmd(this.queryparms3).then((response) => {
        if (typeof response != null) this.$modal.msg(response.msg);
      });
    }, //收钩
    sgfun() {
      this.queryparms3.robotid = localStorage.getItem("robot_config_id");
      sgCmd(this.queryparms3).then((response) => {
        if (typeof response != null) this.$modal.msg(response.msg);
      });
    }, //自由模式后退
    zymsht() {
      this.queryparms3.robotid = localStorage.getItem("robot_config_id");
      zymshtCmd(this.queryparms3).then((response) => {
        if (typeof response != null) this.$modal.msg(response.msg);
      });
    }, //自由模式前进
    zymsqj() {
      this.queryparms3.robotid = localStorage.getItem("robot_config_id");
      zymsqjCmd(this.queryparms3).then((response) => {
        if (typeof response != null) this.$modal.msg(response.msg);
      });
    }, //自由模式(启动)
    zymsqd() {
      this.queryparms3.robotid = localStorage.getItem("robot_config_id");
      zymsrobotrunCmd(this.queryparms3).then((response) => {
        if (typeof response != null) this.$modal.msg(response.msg);
      });
    }, //手动模式速度设定
    sdmslb(sdmssdzd) {
      this.sdmssdzd = sdmssdzd;
    }, //自动模式速度设定
    zdmslb(zdmssdzd) {
      this.zdmssdzd = zdmssdzd;
    }, //自动模式(启动)
    zdmsqd() {
      this.queryparms3.robotid = localStorage.getItem("robot_config_id");
      zdqdCmd(this.queryparms3).then((response) => {
        if (typeof response != null) this.$modal.msg(response.msg);
      });
    }, //定点视频
    dd() {
      this.queryparms3.robotid = localStorage.getItem("robot_config_id");
      ddspCmd(this.queryparms3).then((response) => {
        if (typeof response != null) this.$modal.msg(response.msg);
      });
    }, //连续视频
    lx() {
      this.queryparms3.robotid = localStorage.getItem("robot_config_id");
      lxspCmd(this.queryparms3).then((response) => {
        if (typeof response != null) this.$modal.msg(response.msg);
      });
    }, //一键返航
    yjfh() {
      this.queryparms3.robotid = localStorage.getItem("robot_config_id");
      yjfhCmd(this.queryparms3).then((response) => {
        if (typeof response != null) this.$modal.msg(response.msg);
      });
    }, //自由模式速度设定
    zymslb(zymssdzd) {
      this.zymssdzd = zymssdzd;
    }, //手动模式(启动)
    sdmsqd() {
      this.queryparms3.robotid = localStorage.getItem("robot_config_id");
      robotrunCmd(this.queryparms3).then((response) => {
        if (typeof response != null) this.$modal.msg(response.msg);
      });
    }, //手动模式前进
    sdmsqj() {
      this.queryparms3.robotid = localStorage.getItem("robot_config_id");
      qjCmd(this.queryparms3).then((response) => {
        if (typeof response != null) this.$modal.msg(response.msg);
      });
    }, //手动模式后退
    sdmsht() {
      this.queryparms3.robotid = localStorage.getItem("robot_config_id");
      htCmd(this.queryparms3).then((response) => {
        if (typeof response != null) this.$modal.msg(response.msg);
      });
    }, //电子地图
    getMap() {
      this.queryParams.plcid = localStorage.getItem("plcid");
      this.queryParams.robotid = localStorage.getItem("robot_config_id")
      this.picpath = localStorage.getItem("pic_head");
      this.mapsite = localStorage.getItem("map_site");
      if (typeof (this.queryParams.robotid) != "undefined" && this.queryParams.robotid != null) {
        getTrackMaprobot(this.queryParams).then(response => {
          if (typeof (response.data) != "undefined" && response.data != null && response.data.dzdt.length > 0) {
            this.result = response.data.dzdt;
            this.arrdata = [[]];//初始化地图值
            //机器人运行轨迹//轨道地图数据//如果有当前巡检点位置坐标获取当前位置坐标
            if (typeof (response.data.positionxy) != "undefined" && response.data.positionxy != "unxy") {
              let positionxy = response.data.positionxy.split(",");//xy坐标
              localStorage.removeItem("xposition");//删除键值  机器人开始位置x坐标
              localStorage.removeItem("yposition");//删除键值 机器人开始位置y坐标
              localStorage.removeItem("xjbh");//删除键值 机器人开始位置y坐标
              localStorage.setItem("xposition", positionxy[0]);//存储值 机器人开始位置x坐标
              localStorage.setItem("yposition", positionxy[1]);//存储值 机器人开始位置y坐标
              localStorage.setItem("xjbh", response.data.xjbh);//存储值 巡检点编号
            }
            const result_length = this.result.length;
            for (let i = 0; i < result_length; i++) {
              //因为我在后台取出来的数据是一行的，字符串形式
              let dataArray = this.result[i].xyposition.split(",");
              //这句话是必须的，每次都要新建一个一维数组,不然会报错
              this.arrdata[i] = new Array();
              const data_length = dataArray.length;
              for (let j = 0; j < data_length; j++) {
                this.arrdata[i][j] = dataArray[j];
              }
            }//地图位置 上下左右
            const dtop = this.arrdata;
            let site_arr = [];
            //地图坐标位置方法编写
            if (typeof this.mapsite != 'undefined' && this.mapsite != '') {
              site_arr = this.mapsite.split(',');
            }
            //电子地图
            if (this.count % 2 == 0)
              this.initEcharts1(dtop, localStorage.getItem("xposition"), localStorage.getItem("yposition"), localStorage.getItem("xjbh"), site_arr[0], site_arr[1], site_arr[2], site_arr[3], 1);   //交替getMap
            else
              this.initEcharts1(dtop, localStorage.getItem("xposition"), localStorage.getItem("yposition"), localStorage.getItem("xjbh"), site_arr[0], site_arr[1], site_arr[2], site_arr[3], 2);
            this.count += 1;
          } else {
            if (myChart != null) myChart.dispose()//销毁echarts
            this.result = null;
          }
        });
      } else {
        if (myChart != null) myChart.dispose()//销毁echarts
        this.result = null;
      }
    }, /*电子轨道图方法*/
    initEcharts1(dtop, xposition, yposition, xjbh, fg) {
      if (this.$refs.chinaMapChart) {
        this.$nextTick(() => {
          myChart = echarts.init(this.$refs.chinaMapChart)
          let option;
          //轨道地图数据
          const data = dtop;
          let img = document.createElement('img');
          if (img.src != null && img.src != "null") {
            img.src = (this.picpath == null || this.picpath == '') ? require('@/assets/images/map-default.png')
              : this.picpath;
          }
          option = {
            tooltip: {
              trigger: 'item',
              formatter: (params) => {  // params就是数据，这里可以打印一下看看
                // return 出去什么，鼠标移入就显示什么,marker就是提示前面蓝色的圆点
                if (typeof params.data[0] == 'undefined') {
                  return ``
                } else {
                  //return `${params.data[2]}</br>${params.marker}横坐标:${params.data[0]}</br>纵坐标:${params.data[1]}`
                  return `${typeof params.data[2] == 'undefined' ? 0 : params.data[2]}点位`
                }
              }
            },
            title: {
              /* text: '机器人巡检轨迹图',*/
              left: 'center'
            },
            grid: {
              //底图四个方向调整
              top: '-0.8%',
              bottom: '12%',
              left: '8%',
              right: '28%'
            },
            xAxis: {
              splitLine: { //网格线
                show: false
              },
              type: 'value',
              axisLine: {
                onZero: false,
                show: false//隐藏y轴
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: false, //隐藏刻度值
              }
            },
            yAxis: {
              splitLine: { //网格线
                show: false
              },
              type: 'value',
              axisLine: {
                onZero: false,
                show: false//隐藏y轴
              },
              axisTick: {
                show: false,  //刻度线
              },
              axisLabel: {
                show: false, //隐藏刻度值
              }
            },
            series: [
              {
                label: {
                  color: '#cefc04',
                  show: true,
                  position: "top",
                  formatter: '{@value}',// 点旁边显示label，这里使用name: '横坐标'这样写也可以，鼠标移入出现提示。
                  fontSize: 6,
                },
                id: 'a',
                /* type: (this.picpath == null || this.picpath == '') ? 'line':'scatter',//scatter 散点，line 曲线*/
                type: 'line',
                smooth: true,
                itemStyle: {
                  // 设置线条颜色
                  normal: {
                    color: (this.picpath == null || this.picpath == '') ? {
                      colorStops: [{
                        offset: 0.5, color: '#cd2026' // 0% 处的颜色
                      }, {
                        offset: 1, color: '#cd2026' // 100% 处的颜色
                      }]
                    } : {
                      colorStops: [{
                        offset: 0.5, color: '#cd2026' // 0% 处的颜色
                      }, {
                        offset: 1, color: '#cd2026' // 100% 处的颜色
                      }]
                    },
                    lineStyle: {
                      width: (this.picpath == null || this.picpath == '') ? 3 : 3,//线条大小
                      type: (this.picpath == null || this.picpath == '') ? 'solid' : 'solid'//可选值还有 dotted  solid
                    }
                  }
                },
                symbolSize: 4,//巡检点大小
                symbol: 'image://' + point,//巡检点图标
                data: data,
                //  symbol: 'circle',
                markPoint: {
                  label: {
                    color: '#2bf18b',  // 文字颜色
                    // padding: [0, 0,-10, 0], // 可用padding调整图片内文字距离
                    show: true,
                    //formatter: '巡检机器人'// 自定义文字内容
                  },
                  //机器人大小
                  itemStyle: {
                    color: {
                      type: 'linear',
                      colorStops: [{
                        offset: 0, color: 'blue' // 0% 处的颜色
                      }, {
                        offset: 1, color: 'blue' // 100% 处的颜色
                      }]
                    }
                  },
                  //symbol: 'circle',
                  symbol: fg == 1 ? 'image://' + rbt : 'image://' + rbt1,
                  // 自定义图片作为标注展示
                  // symbolSize: [58, 38],  // 调整图片的长宽
                  // symbolOffset: [10, '-50%'],  // 调整标注图片的位移方向 大小
                  symbolSize: 16,//机器人大小
                  data: [{//1机器人移动坐标位置
                    xAxis: xposition,
                    yAxis: yposition,
                    value: xjbh,
                    fontSize: 9
                  } /*,{//2机器人移动坐标位置
                  xAxis:23000,
                  yAxis:21500,
                }*/],
                }
              },
              // 闪烁点的重点是以下配置
              {
                // 设置圆心点特效动画、大小
                type: 'effectScatter',
                data: dtop,
                symbolSize: 1,
                //coordinateSystem: 'cartesian2d',
                // 何时显示特效:'render'-绘制完成后显示特效 'emphasis'-高亮（hover）的时候显示特效
                //showEffectOn: 'render',
                // 涟漪特效配置
                // rippleEffect: {
                //   color: '#102cf1',
                //   scale: 4,
                //   // 波纹的绘制方式,可选'stroke'和'fill'
                //   brushType: 'stroke'
                // },
                //圆心点
                hoverAnimation: true,
                itemStyle: {
                  normal: {
                    color: '#cd2026',
                    shadowBlur: 80,
                    shadowColor: '#cd2026',
                  }
                },
                zlevel: 1
              }
            ],
            graphic: [
              {
                type: 'image', // 图形元素类型
                id: 'logo', // 更新或删除图形元素时指定更新哪个图形元素，如果不需要用可以忽略。
                right: 'center', // 根据父元素进行定位 （居中）
                bottom: '8%', // 根据父元素进行定位   （0%）, 如果bottom的值是 0，也可以删除该bottom属性值。
                z: 0,  // 层叠
                bounding: 'all', // 决定此图形元素在定位时，对自身的包围盒计算方式
                style: {
                  image: img, // 这里一定要注意、注意，必须是https开头的图片路径地址
                  width: 760,
                  height: 300
                }
              }
            ]
          }
          if (option && typeof option === 'object') {
            myChart.setOption(option);
          }//点击方法
          window.addEventListener("resize", () => {
            if (myChart != null) myChart.resize();
          });//电子地图与背景图同比缩放
        })
      }
    }, //电机转速
    echarts1(djzs) {
      if (this.$refs.gauges) {
        this.$nextTick(() => {
          myChart1 = echarts.init(this.$refs.gauges);
          myChart1.setOption({
            series: [
              {
                radius: "100%",
                center: ["50%", "50%"],
                type: "gauge",
                axisLine: {
                  lineStyle: {
                    width: 16,
                    color: [
                      [0.3, "#3e78f5"],
                      [0.7, "#9a54eb"],
                      [1, "#f37886"],
                    ],
                  },
                },
                pointer: {
                  width: 9,
                  itemStyle: {
                    color: "#3e78f5",
                  },
                },
                axisTick: {
                  distance: -19,
                  length: 11,
                  lineStyle: {
                    color: "#fff",
                    width: 1,
                  },
                },
                splitLine: {
                  distance: -19,
                  length: 13,
                  lineStyle: {
                    color: "#fff",
                    width: 2,
                  },
                },
                axisLabel: {
                  color: "#fff",
                  distance: 9,
                  fontSize: 6,
                },
                detail: {
                  // width:60,
                  // height:60,
                  fontSize: 10,
                  valueAnimation: true,
                  formatter: "{value} r/min",
                  color: "#fff",
                },
                data: [
                  {
                    value: djzs,
                    name: "电机转速",
                  },
                ],
                title: {
                  show: true,
                  fontSize: 10,
                  offsetCenter: ["0", "10%"],
                  color: "#fff",
                },
                max: 5000,
                min: 0,
              },
            ],
          });
          window.addEventListener("resize", () => {
            if (myChart1 != null) myChart1.resize();
          }); //同比缩放
        });
      }
    }, //电机温度
    echarts2(djwd) {
      if (this.$refs.gauges2) {
        this.$nextTick(() => {
          myChart2 = echarts.init(this.$refs.gauges2);
          myChart2.setOption({
            series: [
              {
                radius: "70%",
                center: ["50%", "50%"],
                type: "gauge",
                splitNumber: 9,
                axisLine: {
                  lineStyle: {
                    width: 10,
                    color: [[1, "#ddebf6"]],
                  },
                },
                pointer: {
                  show: false,
                  width: 5,
                  // itemStyle: {
                  //   color: '#3e78f5'
                  // }
                },
                axisTick: {
                  // show:false,
                  distance: -11,
                  length: 7,
                  lineStyle: {
                    color: "#a9a9a9",
                    width: 1,
                  },
                },
                splitLine: {
                  distance: -10,
                  length: 9,
                  lineStyle: {
                    color: "#a9a9a9",
                    width: 2,
                  },
                },
                axisLabel: {
                  color: "#fff",
                  distance: -22,
                  fontSize: 7,
                },
                detail: {
                  // width:60,
                  // height:60,
                  fontSize: 10,
                  valueAnimation: true,
                  formatter: "{value}°C",
                  color: "#daa666",
                },
                data: [
                  {
                    value: djwd,
                    name: "电机温度",
                  },
                ],
                title: {
                  show: true,
                  offsetCenter: ["0", "-20%"],
                  color: "#daa666",
                  fontSize: 10,
                },
                max: 360,
                min: 0,
              },
            ],
          });
          window.addEventListener("resize", () => {
            if (myChart2 != null) myChart2.resize();
          }); //同比缩放
        });
      }
    }, //电池电量
    echarts3(dcdl) {
      if (this.$refs.gauges3) {
        this.$nextTick(() => {
          myChart3 = echarts.init(this.$refs.gauges3);
          myChart3.setOption({
            series: [
              {
                name: "电量",
                type: "gauge",
                clockwise: true,
                data: [
                  {
                    value: dcdl,
                    name: "电池电量",
                  },
                ],
                radius: "100%",
                // 仪表盘半径
                // startAngle: 208,
                // endAngle: -28,
                min: 0,
                max: 100,
                splitNumber: 10,
                center: ["50%", "50%"],
                axisLabel: {
                  // 大刻度标签。
                  show: true,
                  distance: 10,
                  color: "white",
                  fontSize: 8,
                  formatter: "{value}",
                },
                splitLine: {
                  length: 10,
                  // 分隔线长度
                  lineStyle: {
                    width: 2,
                    color: "#ffffff",
                  },
                },
                axisLine: {
                  // 仪表盘轴线(轮廓线)相关配置。
                  show: true,
                  lineStyle: {
                    // 仪表盘轴线样式。
                    opacity: 1,
                    width: 12,
                    // 表盘宽度
                    shadowBlur: 10,
                    color: [
                      // 仪表盘轴线颜色
                      [
                        1,
                        new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                          {
                            offset: 0,
                            color: "#00e4f0",
                          },
                          {
                            offset: 0.3,
                            color: "#00e4f0",
                          },
                          {
                            offset: 1,
                            color: "#00e4f0",
                          },
                        ]),
                      ],
                    ],
                  },
                },
                axisTick: {
                  // 小刻度相关
                  splitNumber: 5,
                  // 小刻度个数
                  show: true,
                },
                detail: {
                  // 仪表盘详情数据相关
                  color: "#5ab1ef",
                  fontSize: 10,
                  formatter: "{value}%",
                  offsetCenter: [0, "20"],
                },
                title: {
                  show: true,
                  offsetCenter: ["0", "-18%"],
                  color: "#b6cbea",
                  fontSize: 10,
                },
                itemStyle: {
                  // 指针样式
                  color: "#fff",
                },
                pointer: {
                  // 仪表盘指针。
                  show: true,
                  length: "70%",
                  width: 6,
                },
              },
            ],
          });
          window.addEventListener("resize", () => {
            if (myChart3 != null) myChart3.resize();
          }); //同比缩放
        });
      }
    }, //水滴图
    drawLiquidfill(yq, jw, lhq, aq, xcsd, xcwd) {
      const option = {
        series: [
          {
            //name: '违规项',
            type: "liquidFill",
            radius: "90%",
            data: [jw / 100],
            label: {
              normal: {
                formatter: jw.toFixed(1),
                textStyle: {
                  color: "#b3d3fa",
                  fontSize: 9,
                },
              },
            },
            color: ["#446bf5"],
            backgroundStyle: {
              color: "rgba(0,202,148,0.12)",
            },
            outline: {
              borderDistance: 1,
              itemStyle: {
                borderWidth: 2,
                borderColor: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#ade5f9",
                    },
                    {
                      offset: 1,
                      color: "#2e92e2",
                    },
                  ],
                  globalCoord: false,
                },
                shadowBlur: 10,
                shadowColor: "#63b1e6",
              },
            },
            // amplitude: 0,
          },
        ],
      };
      myChart4 = echarts.init(document.getElementById("hygrometer"));
      myChart4.setOption(option);
      window.addEventListener("resize", () => {
        if (myChart4 != null) myChart4.resize();
      }); //同比缩放
      const optiona = {
        series: [
          {
            name: "违规项",
            type: "liquidFill",
            radius: "90%",
            // center: ['50%', '45%'],
            data: [yq / 100],
            label: {
              normal: {
                formatter: yq.toFixed(1),
                textStyle: {
                  color: "#b3d3fa",
                  fontSize: 9,
                },
              },
            },
            color: ["#30b763"],
            backgroundStyle: {
              color: "rgba(0,202,148,0.12)",
            },
            outline: {
              borderDistance: 1,
              itemStyle: {
                borderWidth: 2,
                borderColor: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#86c0b7",
                    },
                    {
                      offset: 1,
                      color: "#51cbae",
                    },
                  ],
                  globalCoord: false,
                },
                shadowBlur: 10,
                shadowColor: "#63b1e6",
              },
            },
          },
        ],
      };
      myChart5 = echarts.init(document.getElementById("hygrometer2"));
      myChart5.setOption(optiona);
      window.addEventListener("resize", () => {
        if (myChart5 != null) myChart5.resize();
      }); //同比缩放
      const optionb = {
        series: [
          {
            name: "违规项",
            type: "liquidFill",
            radius: "90%",
            // center: ['50%', '45%'],
            data: [lhq / 100],
            label: {
              normal: {
                formatter: lhq.toFixed(1),
                textStyle: {
                  color: "#b3d3fa",
                  fontSize: 9,
                },
              },
            },
            color: ["#ab55e7"],
            backgroundStyle: {
              color: "rgba(0,202,148,0.12)",
            },
            outline: {
              borderDistance: 1,
              itemStyle: {
                borderWidth: 2,
                borderColor: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#bd96f0",
                    },
                    {
                      offset: 1,
                      color: "#8e2ad1",
                    },
                  ],
                  globalCoord: false,
                },
                shadowBlur: 10,
                shadowColor: "#1f1997",
              },
            },
            // amplitude: 0,
          },
        ],
      };
      myChart6 = echarts.init(document.getElementById("hygrometer3"));
      myChart6.setOption(optionb);
      window.addEventListener("resize", () => {
        if (myChart6 != null) myChart6.resize();
      }); //同比缩放
      const optionc = {
        series: [
          {
            name: "违规项",
            type: "liquidFill",
            radius: "90%",
            // center: ['50%', '45%'],
            data: [xcwd / 100],
            label: {
              normal: {
                formatter: xcwd.toFixed(1),
                textStyle: {
                  color: "#b3d3fa",
                  fontSize: 9,
                },
              },
            },
            color: ["#6a6d2b"],
            backgroundStyle: {
              color: "rgba(0,202,148,0.12)",
            },
            outline: {
              borderDistance: 1,
              itemStyle: {
                borderWidth: 2,
                borderColor: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#b8bf88",
                    },
                    {
                      offset: 1,
                      color: "#b2c151",
                    },
                  ],
                  globalCoord: false,
                },
                shadowBlur: 10,
                shadowColor: "#99a82f",
              },
            },
            // amplitude: 0,
          },
        ],
      };
      myChart7 = echarts.init(document.getElementById("hygrometer4"));
      myChart7.setOption(optionc);
      window.addEventListener("resize", () => {
        if (myChart7 != null) myChart7.resize();
      }); //同比缩放
      const optiond = {
        series: [
          {
            name: "违规项",
            type: "liquidFill",
            radius: "90%",
            // center: ['50%', '45%'],
            data: [xcsd / 100],
            label: {
              normal: {
                formatter: xcsd.toFixed(1),
                textStyle: {
                  color: "#b3d3fa",
                  fontSize: 9,
                },
              },
            },
            color: ["#13a496"],
            backgroundStyle: {
              color: "rgba(0,202,148,0.12)",
            },
            outline: {
              borderDistance: 1,
              itemStyle: {
                borderWidth: 2,
                borderColor: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#7bbdba",
                    },
                    {
                      offset: 1,
                      color: "#3bc4c0",
                    },
                  ],
                  globalCoord: false,
                },
                shadowBlur: 10,
                shadowColor: "#63b1e6",
              },
            },
            // amplitude: 0,
          },
        ],
      };
      myChart8 = echarts.init(document.getElementById("hygrometer5"));
      myChart8.setOption(optiond);
      window.addEventListener("resize", () => {
        if (myChart8 != null) myChart8.resize();
      }); //同比缩放
      const optione = {
        series: [
          {
            name: "违规项",
            type: "liquidFill",
            radius: "90%",
            // center: ['50%', '45%'],
            data: [aq / 100],
            label: {
              normal: {
                formatter: aq.toFixed(1),
                textStyle: {
                  color: "#b3d3fa",
                  fontSize: 9,
                },
              },
            },
            color: ["#6073dd"],
            backgroundStyle: {
              color: "rgba(0,202,148,0.12)",
            },
            outline: {
              borderDistance: 1,
              itemStyle: {
                borderWidth: 2,
                borderColor: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#503bbd",
                    },
                    {
                      offset: 1,
                      color: "#7d80ad",
                    },
                  ],
                  globalCoord: false,
                },
                shadowBlur: 10,
                shadowColor: "#63b1e6",
              },
            },
            // amplitude: 0,
          },
        ],
      };
      myChart9 = echarts.init(document.getElementById("hygrometer6"));
      myChart9.setOption(optione);
      window.addEventListener("resize", () => {
        if (myChart9 != null) myChart9.resize();
      }); //同比缩放
    },
    //机器人模式设置
    jqrmsF(jqrms) {
      this.queryparms3.valu = jqrms;
      console.log("机器人模式设置" + this.queryparms3.valu);
      if (this.queryparms3.valu != "") {
        this.queryparms3.robotid = localStorage.getItem("robot_config_id");
        msszCmd(this.queryparms3).then((response) => {
          if (typeof response != null) this.$modal.msg(response.msg);
        });
      } else {
        this.$modal.msgError("机器人模式设置不能为空");
      }
    }, //机器人自由模式设置
    jqrzymsF(jqrms) {
      this.queryparms3.valu = jqrms;
      console.log("机器人模式设置" + this.queryparms3.valu);
      if (this.queryparms3.valu != "") {
        this.queryparms3.robotid = localStorage.getItem("robot_config_id");
        zymsmsszCmd(this.queryparms3).then((response) => {
          if (typeof response != null) this.$modal.msg(response.msg);
        });
      } else {
        this.$modal.msgError("机器人模式设置不能为空");
      }
    }, //机器人暂停
    zt() {
      this.queryparms3.robotid = localStorage.getItem("robot_config_id");
      robotstopCmd(this.queryparms3).then((response) => {
        if (typeof response != null) this.$modal.msg(response.msg);
      });
    }, //自动模式速度设置
    zdmsdsd() {
      this.queryparms3.valu = this.zdmssdzd;
      console.log("自动模式速度设置" + this.zdmssdzd);
      if (this.queryparms3.valu != "") {
        this.queryparms3.robotid = localStorage.getItem("robot_config_id");
        xjsdCmd(this.queryparms3).then((response) => {
          if (typeof response != null) this.$modal.msg(response.msg);
        });
      } else {
        this.$modal.msgError("自动模式速度设置不能为空");
      }
    }, //自由模式速度设置
    zymsdsd() {
      this.queryparms3.valu = this.zymssdzd;
      console.log("自由模式速度设置" + this.zymssdzd);
      if (this.queryparms3.valu != "") {
        this.queryparms3.robotid = localStorage.getItem("robot_config_id");
        jqrsdzymsCmd(this.queryparms3).then((response) => {
          if (typeof response != null) this.$modal.msg(response.msg);
        });
      } else {
        this.$modal.msgError("自由模式速度设置不能为空");
      }
    },
  },
  beforeDestroy() {
    //页面改变销毁定时器
    if (myChart != null) {
      myChart.clear();
      myChart = null;
    }
    if (myChart1 != null) {
      myChart1.clear();
      myChart1 = null;
    }
    if (myChart2 != null) {
      myChart2.clear();
      myChart2 = null;
    }
    if (myChart3 != null) {
      myChart3.clear();
      myChart3 = null;
    }
    if (myChart4 != null) {
      myChart4.clear();
      myChart4 = null;
    }
    if (myChart5 != null) {
      myChart5.clear();
      myChart5 = null;
    }
    if (myChart6 != null) {
      myChart6.clear();
      myChart6 = null;
    }
    if (myChart7 != null) {
      myChart7.clear();
      myChart7 = null;
    }
    if (myChart8 != null) {
      myChart8.clear();
      myChart8 = null;
    }
    if (myChart9 != null) {
      myChart9.clear();
      myChart9 = null;
    }
    if (myChart10 != null) {
      myChart10.clear();
      myChart10 = null;
    }
    if (this.timer) {
      clearInterval(this.timer);
    }
    if (this.timer1) {
      clearInterval(this.timer1);
    }
    if (this.timer2) {
      clearInterval(this.timer2);
    }
    if (this.rtspQurl != null || this.rtspQurl != "") {
      this.rtspQurl = "";
    }
    if (this.rtspHurl != null || this.rtspHurl != "") {
      this.rtspHurl = "";
    }
    if (this.flvPlayer != null) {
      this.flvPlayer.destroy();
      this.flvPlayer = null;
    }
    if (this.flvPlayerH != null) {
      this.flvPlayerH.destroy();
      this.flvPlayerH = null;
    }
    this.stopQFlvVideo(); //停止供流
    this.stopHFlvVideo(); //停止供流
  },
  enter() {
    this.isDologin = true;
  },
  leave() {
    this.isDologin = false;
  },
};
</script>
<style>
.el-input.el-input--suffix .el-input__inner {
  background: transparent !important;
}
</style>
<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}

//去除按钮自带的
.el-button+.el-button {
  margin-left: 0px;
}

//左边按钮
.el-icon-d-arrow-right {
  font-size: 22px;
}

//右边按钮
.el-icon-d-arrow-left {
  font-size: 22px;
}

//抽屉
::v-deep .el-drawer.rtl {
  background-color: #0e2356;
}

::v-deep .el-drawer.ltr {
  background-color: #0e2356;
}

::v-deep .el-drawer__container {
  background-color: transparent;
  overflow: auto;
}

//左边抽屉开始............................
.PLCpanel {
  width: 94%;
  height: 40%;
  margin-left: 3%;
  margin-top: 3%;
  margin-right: 3%;
  border-radius: 10px;
  background: #0e2356;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.PLCpanel-p1 {
  width: 340px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 5%;
}

.PLCpanel-p1>p {
  width: 89px;
  height: 28px;
  font-size: 23px;
  font-family: "PangMenZhengDao";
  font-weight: 400;
  color: #5dcbff;
}

.PLCpanel-para {
  width: 340px;
  height: 50px;
  display: flex;
  //justify-content: left;
  position: relative;
  left: -72px;
  //margin:0 0 0 -30px;
  margin-bottom: 4%;
}

.PLCpanel-parap1 {
  width: 89px;
  height: 22px;
  font-size: 12px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #ededed;
  position: absolute;
  left: 15%;
  top: 10px;
  transform: translateY(-10%);
}

.PLCpanel-parap2 {
  position: absolute;
  top: 36px;
  left: 17%;
  transform: translateY(-20%);
}

::v-deep.PLCpanel-parap3 {
  position: absolute;
  top: 20px;
  left: 20%;
  transform: translateX(100%) translateY(-30%);

  .el-input--suffix,
  .el-input__inner {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    border: 2px solid #54619d;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    background: #17255d;
    color: #fff !important;
    height: 30px;
    border-radius: 10px;
    width: 130px;
  }

  //图标
  .el-select__caret {
    margin-left: -40px;
  }
}

::v-deep.el-button.el-button--primary {
  background: #01052b !important;
}

.PLCpane2 {
  width: 340px;
  height: 50px;
  font-size: 12px;
  color: #ededed;
  font-family: Source Han Sans CN;
  display: flex;
  margin-left: -15px;
  justify-content: left;
  margin-bottom: 1%;
}

.PLCpane2-left {
  //margin: 0 20px 0 0;
  width: 150px;
  display: flex;
  justify-content: left;
  align-items: center;

  :nth-child(1) {
    width: 100px;
    margin-right: 4px;
  }

  :nth-child(2) {
    width: 50px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1.5px solid #54619d;
    border-radius: 4px;
  }
}

.PLCpane3 {
  width: 340px;
  height: 50px;
  font-size: 12px;
  color: #ededed;
  font-family: Source Han Sans CN;
  display: flex;
  margin-left: -15px;
  justify-content: left;
}

.PLCpane3-left {
  width: 150px;
  margin-top: 10px;
  display: flex;
  justify-content: left;
  align-items: center;

  :nth-child(1) {
    width: 100px;
    margin-right: 4px;
  }

  :nth-child(2) {
    width: 50px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1.5px solid #54619d;
    border-radius: 4px;
  }
}

.operation {
  width: 94%;
  height: 55%;
  margin-top: 14px;
  margin-left: 12px;
  margin-right: 12px;
  margin-bottom: 6px;
  border-radius: 10px;
  background: #0e2356;
}

.operation1 {
  width: 200px;
  height: 40px;
  position: relative;
}

.operation-p1 {
  font-size: 12px;
  color: #ededed;
  font-family: Source Han Sans CN;
  position: absolute;
  left: 20px;
  top: 8px;
}

.operation-p2 {
  position: absolute;
  left: 28.5px;
  top: 30px;
  margin-top: 5px;
}

.operation2 {
  width: 80px;
  display: flex;
  margin-top: 10px;
  margin-left: 28.5px;
}

.operation2>p {
  font-size: 14px;
  color: #ededed;
  font-family: Source Han Sans CN;
}

.operation3 {
  width: 180px;
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  //margin-bottom: 20px;
  margin-top: 10px;
  //background-color: #2ec7a1;
}

.operation3-1 {
  width: 100px;
  height: 30px;
  background: linear-gradient(0deg, #0e2356, #1b2d67);
  border: 2px solid #2b5b9b;
  border-radius: 5px;
  margin-bottom: 15px;
  //margin-left: 22%;
}

.operation3-2 {
  width: 100px;
  height: 30px;
  background: linear-gradient(0deg, #4c0820, #0e2356);
  border: 2px solid #942028;
  border-radius: 5px;
}

.operation4 {
  width: 120px;
  height: 100px;
  display: flex;
  margin-top: 10px;
  //background-color: #e6f062;
}

.operation4-1 {
  width: 100px;
  height: 30px;
  margin-top: 10px;
  background: linear-gradient(0deg, #0e2356, #065d70);
  border: 2px solid #108b8f;
  border-radius: 5px;
}

//左边抽屉结束..............................

//右边抽屉开始.............................
.right-top {
  width: 94%;
  height: 55%;
  margin-left: 3%;
  margin-top: 3%;
  margin-right: 3%;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #0e2356;
}

.right-topTitle {
  width: 340px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 7px;
}

.right-topTitle>p {
  width: 120px;
  height: 28px;
  font-size: 20px;
  font-family: PangMenZhengDao;
  font-weight: 400;
  color: #5dcbff;
}

.Speed-dial {
  width: 94%;
  height: 65px;
  margin-left: 7px;
  margin-bottom: 75px;
  // margin-top:-10px;
  //background-color: cadetblue;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.right-mode {
  width: 360px;
  height: 50px;
  margin-bottom: 10px;
  margin-left: 7px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.mode-box {
  width: 60px;
  height: 50px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.mode-box :nth-child(1) {
  font-size: 12px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ededed;
  margin-bottom: 2px;
}

.mode-box :nth-child(2) {
  width: 60px;
  height: 25px;
  text-align: center;
  border: 2px solid #54619d;
  border-radius: 10px;
  font-size: 12px;
  font-family: Bahnschrift;
  font-weight: 400;
  color: #efefef;
  display: flex;
  justify-content: center;
  align-items: center;
}

.Mode-selection {
  width: 360px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 4px;
  margin-left: 7px;
}

.Mode-selection>p {
  width: 96px;
  height: 24px;
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #ededed;
}

.Operation-button {
  width: 360px;
  height: 80px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-left: 7px;
}

.Operation-buttonBox {
  width: 60px;
  height: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.Operation-buttonBox :nth-child(1) {
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(68deg, #3040f4, #3f79f4);
  margin-bottom: 5px;
  border-width: 0px;
}

.Operation-buttonBox :nth-child(2) {
  width: 60px;
  height: 13px;
  text-align: center;
  font-size: 12px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #ededed;
}

//手动模式
.right-bottom1 {
  width: 94%;
  height: 40%;
  margin-left: 3%;
  margin-top: 3%;
  margin-right: 3%;
  border-radius: 10px;
  padding-top: 10px;
  background: #0e2356;
}

.right-bottomTitle {
  height: 30px;
}

.right-bottomTitle p:nth-child(1) {
  width: 95px;
  height: 26px;
  font-size: 12px;
  margin-left: 30px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #ededed;
}

.right-bottomTitle p:nth-child(2) {
  width: 72px;
  height: 2px;
  background: #4691ff;
  border-radius: 2px;
  margin-left: 36px;
  margin-top: 3px;
}

//自动模式
.right-bottom2 {
  width: 94%;
  height: 40%;
  margin-left: 3%;
  margin-top: 3%;
  margin-right: 3%;
  border-radius: 10px;
  padding-top: 10px;
  background: #0e2356;

  .right-bottomTitle {
    width: 98%;
    height: 15%;
    margin-top: 1%;

    //background-color: #00FF00;
    >p {
      width: 95px;
      height: 20px;
      font-size: 15px;
      margin-left: 2%;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #ededed;
    }

    span {
      display: block;
      width: 52px;
      height: 2px;
      margin-left: 2.5%;
      background: #4691ff;
    }
  }

  .right-bottomBox {
    width: 98%;
    height: 85%;

    .right-bottomBox1 {
      width: 98%;
      height: 30%;
      display: flex;
      justify-content: center;
      align-items: center;

      >span {
        display: block;
        //margin-top: 5px;
        margin-left: 4px;
        font-size: 12px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ededed;
      }

      .btn {
        width: 100px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: linear-gradient(0deg, #0e2356, #1b2d67);
        border: 2px solid #2b5b9b;
        border-radius: 4px;
        font-size: 12px;
        margin-left: 8px;
        font-family: Bahnschrift;
        font-weight: 400;
        color: #c1c1c1;
      }
    }

    .right-bottomBox2 {
      width: 100%;
      height: 28%;
      display: flex;
      justify-content: center;
      align-items: center;

      .btn1 {
        width: 50px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: linear-gradient(0deg, #0e2356, #0d817a);
        border: 2px solid #2ec7a1;
        font-size: 12px;
        font-family: Bahnschrift;
        font-weight: 400;
        color: #c1c1c1;
      }

      .btn2 {
        width: 50px;
        height: 30px;
        margin-left: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: linear-gradient(0deg, #0e2356, #337f17);
        border: 2px solid #3ca813;
        font-size: 12px;
        font-family: Bahnschrift;
        font-weight: 400;
        color: #c1c1c1;
      }
    }

    .right-bottomBox3 {
      display: flex;
      align-items: center;
      justify-content: center;

      .btn1 {
        width: 50px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: linear-gradient(0deg, #0e2356, #1b2d67);
        border: 2px solid #2b5b9b;
        font-size: 12px;
        font-family: Bahnschrift;
        font-weight: 400;
        color: #c1c1c1;
      }

      .btn2 {
        width: 50px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: linear-gradient(0deg, #0e2356, #065d70);
        border: 2px solid #108b8f;
        font-size: 12px;
        font-family: Bahnschrift;
        font-weight: 400;
        color: #c1c1c1;
        margin-left: 10px;
      }

      .btn3 {
        width: 50px;
        height: 30px;
        margin-left: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: linear-gradient(0deg, #4c0820, #0e2356);
        border: 2px solid #942028;
        font-size: 12px;
        font-family: Bahnschrift;
        font-weight: 400;
        color: #c1c1c1;
      }
    }
  }
}

//一键返航
.right-bottom3 {
  width: 94%;
  height: 40%;
  margin-left: 3%;
  margin-top: 3%;
  margin-right: 3%;
  border-radius: 10px;
  padding-top: 10px;
  background: #0e2356;

  .right-bottomTitle {
    width: 98%;
    height: 20%;
    margin-top: 1%;

    //background-color: #00FF00;
    >p {
      width: 95px;
      height: 26px;
      font-size: 15px;
      margin-left: 2%;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #ededed;
    }

    span {
      display: block;
      width: 52px;
      height: 2px;
      margin-left: 2.5%;
      background: #4691ff;
    }
  }

  .right-bottomBox {
    width: 98%;
    height: 60%;
    display: flex;
    justify-content: center;
    align-items: flex-end;

    //background-color: #0264bf;
    .btn {
      width: 50px;
      height: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: linear-gradient(0deg, #0e2356, #1b2d67);
      border: 2px solid #2b5b9b;
      border-radius: 4px;
      font-size: 12px;
      //margin-left: 8px;
      font-family: Bahnschrift;
      font-weight: 400;
      color: #c1c1c1;
    }
  }
}

//自由模式
.right-bottom4 {
  width: 94%;
  height: 40%;
  margin-left: 3%;
  margin-top: 3%;
  margin-right: 3%;
  border-radius: 10px;
  padding-top: 10px;
  background: #0e2356;

  .right-bottomTitle {
    width: 98%;
    height: 20%;
    margin-top: 1%;

    //background-color: #00FF00;
    >p {
      width: 95px;
      height: 26px;
      font-size: 15px;
      margin-left: 2%;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #ededed;
    }

    span {
      display: block;
      width: 52px;
      height: 2px;
      margin-left: 2.5%;
      background: #4691ff;
    }
  }

  .right-bottomBox {
    width: 98%;
    height: 85%;

    //background-color: #2ec7a1;
    .right-bottomBox1 {
      width: 90%;
      height: 30%;
      margin-left: 10px;
      display: flex;
      justify-content: center;
      align-items: center;

      //background-color: hotpink;
      >span {
        display: block;
        //margin-top: 5px;
        margin-left: 4px;
        font-size: 12px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ededed;
      }

      .btn {
        width: 80px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: linear-gradient(0deg, #0e2356, #1b2d67);
        border: 2px solid #2b5b9b;
        border-radius: 4px;
        font-size: 12px;
        margin-left: 8px;
        font-family: Bahnschrift;
        font-weight: 400;
        color: #c1c1c1;
      }
    }

    .right-bottomBox2 {
      width: 100%;
      height: 28%;
      display: flex;
      justify-content: center;
      align-items: center;

      .btn1 {
        width: 50px;
        height: 25px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: linear-gradient(0deg, #0e2356, #0d817a);
        border: 2px solid #2ec7a1;
        font-size: 12px;
        font-family: Bahnschrift;
        font-weight: 400;
        color: #c1c1c1;
      }

      .btn2 {
        width: 50px;
        height: 25px;
        margin-left: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: linear-gradient(0deg, #0e2356, #337f17);
        border: 2px solid #3ca813;
        font-size: 12px;
        font-family: Bahnschrift;
        font-weight: 400;
        color: #c1c1c1;
      }
    }

    .right-bottomBox3 {
      display: flex;
      align-items: center;
      justify-content: center;

      .btn1 {
        width: 50px;
        height: 25px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: linear-gradient(0deg, #0e2356, #1b2d67);
        border: 2px solid #2b5b9b;
        font-size: 12px;
        font-family: Bahnschrift;
        font-weight: 400;
        color: #c1c1c1;
      }

      .btn2 {
        width: 50px;
        height: 25px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: linear-gradient(0deg, #0e2356, #065d70);
        border: 2px solid #108b8f;
        font-size: 12px;
        font-family: Bahnschrift;
        font-weight: 400;
        color: #c1c1c1;
        margin-left: 10px;
      }

      .btn3 {
        width: 50px;
        height: 25px;
        margin-left: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: linear-gradient(0deg, #4c0820, #0e2356);
        border: 2px solid #942028;
        font-size: 12px;
        font-family: Bahnschrift;
        font-weight: 400;
        color: #c1c1c1;
      }
    }
  }
}

.Target-position {
  width: 360px;
  height: 50px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 15px;
}

.Target-position1 {
  width: 130px;
  height: 34px;
  line-height: 34px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.Target-position1 :nth-child(1) {
  width: 80px;
  height: 30px;
  text-align: center;
  background: #17255d;
  border: 2px solid #54619d;
  border-radius: 10px;
  font-size: 12px;
  font-family: Bahnschrift;
  font-weight: 400;
  color: #c1c1c1;
}

.Target-position1 :nth-child(2) {
  margin-left: 3px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ededed;
}

.Target-position2 {
  width: 130px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.Target-position2>p {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 40px;
  font-size: 12px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ededed;
  background-image: url(../../components/images/bottom.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.Speed-setting {
  width: 360px;
  height: 50px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.Speed-setting1 {
  width: 140px;
  height: 34px;
  line-height: 34px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.Speed-setting1>p {
  margin-left: 3px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ededed;
}

.right-bottomBox4 {
  margin-left: 3%;
  width: 40%;
  height: 12%;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;

  //background-color: #d4f283;
  .btn1 {
    width: 50px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(0deg, #0e2356, #0d817a);
    border: 2px solid #2ec7a1;
    font-size: 12px;
    font-family: Bahnschrift;
    font-weight: 400;
    color: #c1c1c1;
  }

  .btn2 {
    width: 50px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(0deg, #0e2356, #337f17);
    border: 2px solid #3ca813;
    font-size: 12px;
    font-family: Bahnschrift;
    font-weight: 400;
    color: #c1c1c1;
  }
}

.Operation-Btn {
  width: 360px;
  height: 100px;
  display: flex;
  justify-content: space-around;
  margin-top: 30px;
}

.Operation-Btn1 {
  width: 70px;
  height: 30px;
  border: none;
  border: 2px solid #2b5b9b;
  border-radius: 5px;
  background: linear-gradient(0deg, #0e2356, #1b2d67);
}

.Operation-Btn2 {
  width: 70px;
  height: 30px;
  border: none;
  border-radius: 5px;
  background: linear-gradient(0deg, #0e2356, #065d70);
  border: 2px solid #108b8f;
}

.Operation-Btn3 {
  width: 70px;
  height: 30px;
  border: none;
  border-radius: 5px;
  background: linear-gradient(0deg, #4c0820, #0e2356);
  border: 2px solid #942028;
}

//右边抽屉结束..........................................
//首页部分...............................................
.app-container {
  width: 100%;
  height: calc(100vh - 35px);
  background-color: blanchedalmond;
  background: url("../../components/images/beijin.png");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: 100% 100%;
  background-size: cover;
}

//头部开始
.dataScreen-head {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 45px;
  background: url("../../components/images/head.png") no-repeat;
  background-size: 100% 100%;
}

.dataScreen-title {
  width: 50%;
  height: 100%;
  //background-color: #34EFBD;
}

.dataScreen-title>P {
  letter-spacing: 4px;
  text-align: center;
  font-size: 35px;
  font-family: PangMenZhengDao;
  font-weight: 400;
  font-style: italic;
  color: #ffffff;
  background: linear-gradient(0deg, #74c5f4 0%, #f3f6f0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

//头部结束....................................................
//内容开始
.dataScreen-contner {
  width: 100%;
  height: 100%;
  display: flex;
}

//左边内容开始
.dataScreen-left {
  width: 25%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  // background-color: aquamarine;
}

//机器人列表...............................
.dataScreen-robot {
  width: 92%;
  height: 30%;
  margin-bottom: 6px;
  margin-left: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  //background-color: coral;
}

.dataScreen-rotitle {
  width: 93%;
  height: 36px;
  line-height: 36px;
  margin-top: 1%;
  margin-bottom: 1%;
  margin-left: -20px;
  background-image: url(../../components/images/banner.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;

  p {
    margin-left: 4%;
    font-size: 20px;
    font-family: PangMenZhengDao;
    font-weight: 400;
    color: #5dcbff;
  }
}

.dataScreen-rolist {
  width: 98%;
  height: 85%;
}

::v-deep .el-table {
  background-color: transparent !important;
}

// 机器人表格相关
.el-table__body-wrapper {
  &::-webkit-scrollbar {
    // 整个滚动条
    width: 20px; // 纵向滚动条的宽度
    background: rgba(71, 103, 182, 0.3);
    border: none;
  }

  &::-webkit-scrollbar-track {
    // 滚动条轨道
    border: none;
  }
}

.el-table th.gutter {
  display: none;
  width: 0;
}

.el-table colgroup col[name="gutter"] {
  display: none;
  width: 0;
}

.el-table::before {
  height: 0px;
}

.el-table__body {
  width: 100%;
}

/*滚动条的宽度*/
.commonScrollbarTable ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  display: none;
}

.scrollbarShow ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  display: block;
}

::v-deep .el-table,
::v-deep .el-table__expanded-cell {
  background-color: transparent;
}

// /* 表格内背景颜色 */
::v-deep .el-table th,
::v-deep .el-table tr {
  padding: 0;
  height: 30px;
}

::v-deep .el-table thead {
  background-image: url(../../components/images/liebiao.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: 99;
}

//::v-deep .el-table__row{
//background-image: url(../../components/images/liebiao1.png);
//background-repeat: no-repeat;
//background-size: 100% 100%;
//}

::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td {
  background-color: transparent;
  border-bottom: 1px solid rgba(32, 32, 32, 0.854);
  border-image: linear-gradient(rgb(26, 37, 95), rgb(20, 24, 85)) 20 20;
}

// 移入变色
::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td {
  background-color: #0c2d50c3;
}

//电器参数.......................................
.dataScreen-electrical {
  width: 92%;
  height: 30%;
  //margin-bottom: 3%;
  display: flex;
  flex-direction: column;
  align-items: center;
  //background-color: blueviolet;
}

.dataScreen-eltitle {
  width: 92%;
  height: 36px;
  line-height: 36px;
  /* margin-left: -20px;*/
  display: flex;
  //justify-content: space-between;
  margin-top: 1%;
  margin-bottom: 1%;
  background-image: url(../../components/images/banner.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;

  //background-color: #3CA813;
  p {
    width: 34%;
    height: 30px;
    margin-left: 4%;
    font-size: 20px;
    font-family: PangMenZhengDao;
    font-weight: 400;
    color: #5dcbff;
    // background-color: #34EFBD;
  }
}

.dataScreen-ellist {
  width: 90%;
  height: 80%;

  // background-color: crimson;
  .item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    color: rgba(218, 216, 216, 0.851);
    font-size: 13px;
    display: flex;
    //justify-content: center;
    align-items: center;
    // line-height: 50px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    border-bottom: 1px solid rgba(32, 32, 32, 0.854);
    // border-image: -webkit-linear-gradient(rgb(215, 215, 214), rgb(153, 154, 154)) 20 20;
    // border-image: -moz-linear-gradient(rgb(215, 215, 214), rgb(153, 154, 154)) 20 20;
    // border-image: -o-linear-gradient(rgb(215, 215, 214), rgb(153, 154, 154)) 20 20;
    border-image: linear-gradient(rgb(26, 37, 95), rgb(20, 24, 85)) 20 20;
    height: 33px;
    margin-left: 10px;
  }
}

.dataScreen-ellist::-webkit-scrollbar {
  display: none;
  /*隐藏滚动条*/
}

::v-deep .el-input.el-input--suffix {

  // 2.修改背景颜色、字体颜色、边框、宽高
  .el-input__inner {
    background-color: transparent;
    border: none;
    color: #5bc8fc;
    height: 30px;
    width: 140px;
  }

  // 符号的位置会错乱，进行修正（水平）
  .el-input__suffix-inner {
    position: absolute;
  }
}

//设备运行参数.............................
.dataScreen-equipment {
  width: 92%;
  height: 31%;
  display: flex;
  flex-direction: column;
  align-items: center;
  // background-color: cadetblue;
}

.dataScreen-eqtitle {
  width: 92%;
  height: 36px;
  line-height: 36px;
  margin-top: 1%;
  margin-bottom: 1%;
  background-image: url(../../components/images/banner.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;

  p {
    margin-left: 4%;
    font-size: 20px;
    font-family: PangMenZhengDao;
    font-weight: 400;
    color: #5dcbff;
  }
}

.dataScreen-eqlist {
  width: 93%;
  height: 80%;
  //padding-left: 20px;
}

::v-deep.el-progress-bar__inner {
  background-color: unset; // 将进度条默认的颜色给去除掉，若不生效就再加个!important
  // background-image: linear-gradient(90deg,#252799 100%,#2887b3 50% #27c9de 0%);  // 给进度条加上渐变色
  // background: linear-gradient(to right, #252799, #2887b3, #27c9de 70px);
  // background: linear-gradient(to right, red, blue 70px);
  // stroke-linecap:butt
}

.dataScreen-eqlist::-webkit-scrollbar {
  display: none;
  /*隐藏滚动条*/
}

//左边结束...................................................................

//中间内容开始
.dataScreen-center {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

//监控视频区.................................
.dataScreen-video {
  width: 98%;
  height: 55%;
  background-image: url(../../components/images/border.gif);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  //background-color: rgb(139, 196, 252);
}

// 摄像头图标
.dataScreen-videoimg {
  width: 80%;
  height: 6%;

  //background-color: rgb(244, 189, 170);
  img {
    margin-left: 2%;
    margin-top: 1%;
    height: 80%;
  }
}

//监控画面
.dataScreen-videoBox {
  width: 100%;
  height: 92%;
  display: flex;
  align-items: center;
  justify-content: center;
  //background-color: khaki;
}

.dataScreen-videoIcon {
  width: 49%;
  height: 99%;
  border: 1px solid #4689e5;
  background-color: #040404;
  background-image: url(../../components/images/jiankong.png);
  background-repeat: no-repeat;
  background-position: center center;

  //background-color: aquamarine;
  img {
    width: 30%;
    height: 40%;
    margin: 25% 30%;
  }
}

//轨道部分
.dataScreen-track {
  width: 98%;
  height: 45%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.dataScreen-trackTop {
  width: 95%;
  height: 12%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url(../../components/images/color.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.dataScreen-trackIcon1 {
  display: flex;
  width: 108px;
  height: 100%;
  //background-color: #2ec7a1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dataScreen-trackIcon1>img {
  width: 16px;
  height: 16px;
}

.dataScreen-trackIcon1>p {
  margin-left: 6px;
  width: 41px;
  height: 13px;
  font-size: 12px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
}

.dataScreen-trackIcon2 {
  width: 144px;
  height: 100%;
  //background-color: #FFD200;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dataScreen-trackIcon2>img {
  width: 16px;
  height: 12px;
}

.dataScreen-trackIcon2>p {
  width: 41px;
  height: 13px;
  margin-left: 6px;
  font-size: 12px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
}

.dataScreen-trackIcon3 {
  width: 120px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  //background-color: cadetblue;
}

.dataScreen-trackIcon3>p {
  width: 140px;
  height: 13px;
  font-size: 12px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
  margin-left: 6px;
}

.dataScreen-trackIcon3 {
  width: 120px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  //background-color: cadetblue;
}

.dataScreen-trackIcon3>p {
  width: 140px;
  height: 13px;
  font-size: 12px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
  margin-left: 6px;
}

.dataScreen-trackIcon4 {
  width: 114px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  //background-color: cadetblue;
}

.dataScreen-trackIcon4>p {
  width: 140px;
  height: 13px;
  font-size: 12px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
  margin-left: 6px;
}

.dataScreen-trackIcon5 {
  width: 114px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  //background-color: cadetblue;
}

.dataScreen-trackIcon5>p {
  width: 140px;
  height: 13px;
  font-size: 12px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
  margin-left: 6px;
}

.dataScreen-trackIcon6 {
  width: 100px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  //background-color: cadetblue;
}

.dataScreen-trackIcon6>p {
  width: 140px;
  height: 13px;
  font-size: 12px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
  margin-left: 6px;
}

.dataScreen-trackBtom {
  width: 100%;
  height: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
  //background-color: rgb(199, 152, 245);
}

.dataScreen-trackBtom1 {
  width: 90%;
  height: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #5dcbff;
  font-size: 20px;
  letter-spacing: 2px;
}

//中间部分结束....................................................................

//右边内容开始............................................
.dataScreen-right {
  width: 25%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  //margin-top: 10px;
  //background-color: cornflowerblue;
}

//图标..............................
.dataScreen-rightIcon {
  width: 96%;
  height: 14%;
  display: flex;
  justify-content: space-around;
  //background-color: rgb(223, 248, 113);
}

.dataScreen-rightIcon1 {
  width: 30%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  //margin-top: -8px;

  img {
    width: 78%;
    height: 56px;
  }

  .pname {
    display: block;
    font-size: 12px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    margin-top: -8px;
    color: #ffffff;
  }

  .Online {
    width: 66px;
    height: 18px;
    border-radius: 9px;
    border: 1px solid #00ff00;
    font-family: Source Han Sans CN;
    font-weight: 500;
    font-size: 10px;
    color: #00ff3c;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 3px;
  }

  .Online1 {
    width: 66px;
    height: 18px;
    border-radius: 9px;
    border: 1px solid #a0a2a3;
    font-family: Source Han Sans CN;
    font-weight: 500;
    font-size: 10px;
    color: #ffff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 3px;
  }

  .Offline {
    width: 66px;
    height: 18px;
    border-radius: 9px;
    border: 1px solid #a0a2a3;
    font-family: Source Han Sans CN;
    font-weight: 500;
    font-size: 10px;
    color: #b9bab9;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 3px;
  }

  .p3 {
    margin-top: 3px;
    font-size: 12px;
    font-family: Bahnschrift;
    font-weight: 400;
    color: #f32424;
  }
}

//告警列表..................................
.alarmsList {
  width: 96%;
  height: 20%;
  display: flex;
  flex-direction: column;
  //justify-content: center;
  align-items: center;
  padding-top: 5px;
  overflow-y: auto;

  /* 隐藏滚动条 */
  &::-webkit-scrollbar {
    /* WebKit 浏览器 */
    width: 0;
    /* 将滚动条宽度设置为0 */
  }

  &::-webkit-scrollbar-track {
    /* 轨道 */
    background: transparent;
    /* 可以设置轨道背景颜色 */
  }

  &::-webkit-scrollbar-thumb {
    /* 滚动条手柄 */
    background: transparent;
    /* 可以设置手柄背景颜色 */
  }

  /* 兼容其他浏览器 */
  & {
    -ms-overflow-style: none;
    /* IE 和 Edge */
    scrollbar-width: none;
    /* Firefox */
  }

  .alarms-list {
    width: 96%;
    margin-bottom: 4px;
    display: flex;
    background-image: url(../../components/images/tiao.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;

    .alarmP2 {
      height: 24px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      font-size: 14px;
      color: #ffd200;
      cursor: pointer;

      >p {
        height: 24px;
        display: flex;
        align-items: center;
        margin-left: 10px;
      }
    }
  }

  .sound {
    width: 96%;
    margin: 20px auto;
    display: flex;
    gap: 10px;
    overflow: hidden;
    align-items: center;
    background-image: url(../../components/images/tiao.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  .text-container {
    width: 100%;
    height: 24px;
    overflow: hidden;
    display: flex;
    //justify-content: center;
    align-items: center;
  }

  .alarmP1 {
    width: 90%;
    font-family: Source Han Sans CN;
    font-weight: 500;
    font-size: 14px;
    color: #aaaaaa;
    white-space: nowrap;
    animation: slideLeft 10s linear infinite;
  }

  @keyframes slideLeft {
    0% {
      transform: translateX(100%);
    }

    100% {
      transform: translateX(-50%);
    }
  }
}

//巡检列表..................................
.dataScreen-inspection {
  width: 96%;
  height: 30%;
  display: flex;
  flex-direction: column;
  align-items: center;
  // background-color: lightblue;
}

.dataScreen-intitle {
  width: 90%;
  height: 36px;
  line-height: 36px;
  margin-top: 1%;
  margin-bottom: 1%;
  background-image: url(../../components/images/banner.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;

  p {
    margin-left: 4%;
    font-size: 22px;
    font-family: PangMenZhengDao;
    font-weight: 400;
    color: #5dcbff;
  }
}

.dataScreen-inlist {
  width: 90%;
  height: 84%;
}

//环境参数.............................................
.dataScreen-parameter {
  width: 96%;
  height: 28%;
  display: flex;
  flex-direction: column;
  align-items: center;
  //background-color: cyan;
}

.dataScreen-paratitle {
  width: 90%;
  height: 36px;
  line-height: 36px;
  background-image: url(../../components/images/banner.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;

  p {
    margin-left: 4%;
    font-size: 22px;
    font-family: PangMenZhengDao;
    font-weight: 400;
    color: #5dcbff;
  }
}

.dataScreen-paraBox {
  width: 99%;
  height: 85%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.concentration1 {
  width: 33%;
  height: 48%;
  display: flex;
  flex-direction: column;
  align-items: center;

  div {
    width: 70%;
    height: 70%;
  }

  p {
    margin-top: 5px;
    font-size: 12px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #ffffff;
  }
}

//环境参数检测..................................
.dataScreen-detection {
  width: 96%;
  height: 23%;
  display: flex;
  flex-direction: column;
  align-items: center;
  //background-color: rgb(237, 249, 167);
}

.dataScreen-deTitle {
  width: 90%;
  height: 36px;
  line-height: 36px;
  background-image: url(../../components/images/banner.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;

  p {
    margin-left: 4%;
    font-size: 22px;
    font-family: PangMenZhengDao;
    font-weight: 400;
    color: #5dcbff;
  }
}

.echart {
  width: 99%;
  height: 80%;
  //background-color: #34EFBD;
}

.video-js {
  background-color: rgb(1 5 43);
  object-fit: fill;

  //隐藏video播放按钮
  video::-webkit-media-controls-play-button {
    display: none !important;
  }

  //隐藏video音量进度条
  video::-webkit-media-controls-volume-slider {
    display: none !important;
  }

  //隐藏video音量按钮
  video::-webkit-media-controls-mute-button {
    display: none !important;
  }

  video::-webkit-media-controls-toggle-closed-captions-button {
    display: none !important;
  }

  //隐藏当前时间
  video::-webkit-media-controls-current-time-display {
    display: none !important;
  }

  //隐藏剩余时间
  video::-webkit-media-controls-time-remaining-display {
    display: none !important;
  }

  //隐藏进度条
  video::-webkit-media-controls-timeline {
    display: none !important;
  }

  //更多选项
  video::-internal-media-controls-overflow-button {
    display: none !important;
  }
}

video {
  pointer-events: none;
}
</style>
